fix: Icon and Emoji

[LuisGTF-UM]

Hello very good, I am learning blazor with FluentUI. I am testing the different functionalities that you have, but there is one that is giving me a lot of problems to solve, which are: icons and emojis. The error I currently have is the following, This only appears in the console of the internet explorer (in this case I use Microsoft Edge) and no error appears in Visual Studio Professional:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
       Unhandled exception rendering component: The requested icon (FolderMail, Size16, Regular) is not available in the collection
System.ArgumentException: The requested icon (FolderMail, Size16, Regular) is not available in the collection
    at Microsoft.Fast.Components.FluentUI.FluentIcon.OnParametersSet() in /_/src/Microsoft.Fast.Components.FluentUI/Components/Icon/FluentIcon.cs:line 109
    at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
    at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

The steps I have followed are: 1) I'm with a Blazor WebAssembly project. 2) I have installed Microsoft.Fast.Components.FluentUI using the NuGet package manager that has Visual Studio Professional. The version in question is 2.4.1 3) Then I modified the _import.razor file, leaving it as follows:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using WebPage.Client
@using WebPage.Client.Shared
@using Microsoft.Fast.Components.FluentUI

4) Then I modified the .psproj (in my case it is PaginaWeb.Client.csproj ) with the following:

<PropertyGroup>
<PublishFluentIconAssets>true</PublishFluentIconAssets>
<FluentIconSizes>10,12,16,20,24,28,32,48</FluentIconSizes>
<FluentIconVariants>Filled,Regular</FluentIconVariants>
<PublishFluentEmojiAssets>true</PublishFluentEmojiAssets>
<FluentEmojiGroups>Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places</FluentEmojiGroups>
<FluentEmojiStyles>Color,Flat,HighContrast</FluentEmojiStyles>
</PropertyGroup>

With the following result:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>

   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.7" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.7" PrivateAssets="all" />
     <PackageReference Include="Microsoft.Fast.Components.FluentUI" Version="2.4.1" />
   </ItemGroup>

   <ItemGroup>
     <ProjectReference Include="..\Shared\WebPage.Shared.csproj" />
   </ItemGroup>

<PropertyGroup>
<PublishFluentIconAssets>true</PublishFluentIconAssets>
<FluentIconSizes>10,12,16,20,24,28,32,48</FluentIconSizes>
<FluentIconVariants>Filled,Regular</FluentIconVariants>
<PublishFluentEmojiAssets>true</PublishFluentEmojiAssets>
<FluentEmojiGroups>Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places</FluentEmojiGroups>
<FluentEmojiStyles>Color,Flat,HighContrast</FluentEmojiStyles>
</PropertyGroup>

</Project>

5) Also, in the program.cs file I added the following code:

builder.Services.AddFluentUIComponents(options =>
{
     options.HostingModel = BlazorHostingModel.WebAssembly;
     options.IconConfiguration = ConfigurationGenerator.GetIconConfiguration();
     options.EmojiConfiguration = ConfigurationGenerator.GetEmojiConfiguration();
});

Leaving the program in this way:

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Fast.Components.FluentUI;
using WebPage.Client;
using System.Reflection.Metadata;
using System.Runtime.Intrinsics.X86;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddFluentUIComponents();
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

builder.Services.AddFluentUIComponents(options =>
{
     options.HostingModel = BlazorHostingModel.WebAssembly;
     options.IconConfiguration = ConfigurationGenerator.GetIconConfiguration();
     options.EmojiConfiguration = ConfigurationGenerator.GetEmojiConfiguration();
});

6) In the end, all the code that I make that has Icons and emojis fails in the way that I mentioned above, it only gives an error in the browser console. For example with this simple code:

<h4>With start</h4>
<FluentTextField @bind-Value=value1>
     <FluentIcon Name="@FluentIcons.FolderMail" Size="@IconSize.Size16" Variant="@IconVariant.Regular" Color="@Color.Accent"/>
</FluentTextField>

@code {
     string? value1, value2;
}

It gives an error specifically in the FluentIcon part since when removing it, it does not give an error in the console.

Can you help me please? There is not much information about this error and I don't know what to do anymore.

[vnbaaij]

You can't add an icon in a FluentTextField like that. You seem to be missing Slot="start" in the FluentIcon. What are you trying to achieve?

If I search on https://www.fluentui-blazor.net/Icon for FolderMail with size 16, it shows a valid result.

[mrpmorris]

I would also recommend using the new V3 RC1, there is no need for the extra project settings etc.

[LuisGTF-UM]

You can't add an icon in a FluentTextField like that. You seem to be missing in the FluentIcon. What are you trying to achieve?Slot="start"

If I search on https://www.fluentui-blazor.net/Icon for FolderMail with size 16, it shows a valid result.

My objective is to use one of the examples that you have developed in: https://www.fluentui-blazor.net/TextField specifically in the "Icon" part.

And I have tried to change the line of code for a simpler one in which I only use the icon. But still I get the same error. In this case I have used this line of code: <FluentIcon Name="@FluentIcons.Accessibility" Size="@IconSize.Size16" Variant="@IconVariant.Filled" Color="@Color.Accent"/>

That it has come out automatically from the tool that you have on the website.

Thanks for your help. If you need more information just let me know.

[samuel-mr]

@vnbaaij, apparently there is a conflict with ConfigurationGenerator class. I'm not sure, I think it does not recognize by default the code generated by source generator. If I copy and paste the generated code in startup.cs the icons will works. In my case, I created my project using dotnet new fluentuiblazorwasm

// Copied from Source generators folder
IconConfiguration icon = new(true);
icon.Sizes = new[] {
    IconSize.Size10,
    ...
};
icon.Variants = new[] {
    IconVariant.Filled,
    IconVariant.Regular
};  
EmojiConfiguration emoji = new(false);
builder.Services.AddFluentUIComponents(options =>
{
    options.HostingModel = BlazorHostingModel.WebAssembly; 
    options.IconConfiguration =icon;
    options.EmojiConfiguration = emoji;
});

[vnbaaij]

@samuel-mr conflict with what?

ConfigurationGenerator is known to work. Many have already used it as is. You are much more likely to get a conflict when adding the copied code as the configuration will then exist twice. Once in your code and once in the library code

[LuisGTF-UM]

Thanks for the help received. In the end I had to upgrade to version 3.0.0-RC.1 using the NuGet package manager and install the emoji and icon packs that were in preview. I also installed the templates and am now working with them.