fix: Icon and Emoji

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

1. 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>

1. 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();
});

1. 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.

[mrpmorris]

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

[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.