Error occurred in Icon Component in Microsoft.Fast.Components.FluentUI version 2.1.4.

[Xarkam]

I use Microsoft.Fast.Components.FluentUI 2.1.4 but I ave problem with icons. I recieve this into debug console:

blazor.webassembly.js:1 

       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: The requested icon (Info, Size32, Regular) is not available in the collection
System.ArgumentException: The requested icon (Info, Size32, 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 92
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: The requested icon (AppsListDetail, Size16, Regular) is not available in the collection
System.ArgumentException: The requested icon (AppsListDetail, 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 92
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

Before opening this issue, I read issue #346 and read the links. I adapted the .csproj and the program.cs. However, I still have no icons.

.csproj

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

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

    <PropertyGroup>
        <!--
The icon component is part of the library. By default, NO icons (static assets) will be included when publishing the project.

Setting the property 'PublishFluentIconAssets' to false (default), or leaving the property out completely, will disable publishing of the
icon static assets (with exception of the icons that are being used by the library itself).

Setting the property 'PublishFluentIconAssets' to 'true' will enable publishing of the icon static assets. You can limit what icon assets get published by specifying a set of icon sizes and a set of variants in the '<FluentIconSizes>' and '<FluentIconVariants>' properties respectively.

To determine what icons will be published, the specified options for sizes and variants are combined. Specifying sizes '10' and '16' and variants 'Filled' and 'Regular' means all '10/Filled', all '10/Regular', all '16/Filled' and all '16/Regular' icons assets will be published.
It is not possible to specify multiple individual combinations like '10/Filled' and '16/Regular' in the same set.

When no icon size set is specified in the '<FluentIconSizes>' property, ALL sizes will be included*
When no icon variant set is specified in the '<FluentIconVariants>' property, ALL variants will be included*
* when publishing of icon assets is enabled
-->
        <PublishFluentIconAssets>true</PublishFluentIconAssets>

        <!--
Specify (at least) one or more sizes from the following options (separated by ','):
10,12,16,20,24,28,32,48
Leave out the property to have all sizes included.
-->
        <FluentIconSizes>10,12,16,20,24,48</FluentIconSizes>

        <!--
Specify (at least) one or more variants from the following options (separated by ','):
Filled,Regular
Leave out the property to have all variants included.
-->
        <FluentIconVariants>Filled,Regular</FluentIconVariants>

        <!--
The emoji component is part of the library. By default, NO emojis (static assets) will be included when publishing the project.

Setting the property 'PublishFluentEmoji' to false (default), or leaving the property out completely, will disable publishing of the emoji static assets.

Setting the property 'PublishFluentEmojiAssets' to 'true' will enable publishing of the emoji static assets. You can limit what emoji assets get published by specifying a set of emoji groups and a set of emoji styles in the '<FluentEmojiGroups>' and '<FluentEmojiStyles>' properties respectively.

To determine what emojis will be published, the specified options for sizes and variants are combined. Specifying emoji groups 'Activities' and 'Flags' and emoji styles 'Color' and 'Flat' means all 'Activities/Color', all 'Activities/Flat', all 'Flags/Color' and all 'Flags/Flat' emoji assets will be published.

It is not possible to specify multiple individual combinations like 'Activities/Color' and 'Flags/Flat' in the same published set

When no emoji group set is specified in the '<FluentEmojiGroups>' property, ALL groups will be included*
When no emoji variant set is specified in the '<FluentEmojiStyles>' property, ALL styles will be included*
* when publishing of emoji assets is enabled
-->
        <PublishFluentEmojiAssets>true</PublishFluentEmojiAssets>

        <!--
Specify (at least) one or more groups from the following options (separated by ','):
Activities,Animals_Nature,Flags,Food_Drink,Objects,People_Body,Smileys_Emotion,Symbols,Travel_Places
Leave out the property to have all groups included.
-->
        <FluentEmojiGroups>Activities,Animals_Nature,Flags,Food_Drink,Objects,Smileys_Emotion,Symbols,Travel_Places</FluentEmojiGroups>

        <!--
Specify (at least) one or more styles from the following options (separated by ','):
Color,Flat,HighContrast
Leave out the property to have all styles included.
-->
        <FluentEmojiStyles>Color,</FluentEmojiStyles>
    </PropertyGroup>

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

</Project>

program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Blazor_FluentUI;
using Microsoft.Fast.Components.FluentUI;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
LibraryConfiguration config = new(ConfigurationGenerator.GetIconConfiguration(), ConfigurationGenerator.GetEmojiConfiguration());

builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddFluentUIComponents(config);
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

page with icons: SurveyPrompt.razor

<div class="prompt">
    <div style="display:flex; align-items:center">
        <FluentIcon Name="@FluentIcons.Info" Size="@IconSize.Size32" Color="Color.Neutral" />
        <FluentIcon Name="@FluentIcons.AppsListDetail" Size="@IconSize.Size16" Variant="@IconVariant.Regular" Color="@Color.Neutral" />
        @*<FluentIcon Name="@FluentIcons.Alert" Size="IconSize.Size48" Variant=IconVariant.Filled Color="Color.Neutral" />*@
        <strong>@Title</strong>
    </div>
    <p class="text-nowrap">
        Please take our
        <FluentAnchor Href="https://go.microsoft.com/fwlink/?linkid=2149017" Appearance=Appearance.Hypertext>brief survey</FluentAnchor>
        and tell us what you think.
    </p>
</div>

@code {
    // Demonstrates how a parent component can supply parameters
    [Parameter]
    public string? Title { get; set; }

}

My project is blazor webassembly type and I followed the readme for the installation.

[vnbaaij]

Please supply a repo with this code so we can test and find out what is happening.

[Xarkam]

Please supply a repo with this code so we can test and find out what is happening.

Yes, look https://github.com/Xarkam/Blazorwasm_FluentUI

[vnbaaij]

Ok, found it... In your .csproj you have <FluentIconSizes>10,12,16,20,24,48</FluentIconSizes>

As you can see, 32 is not in there. Guess what size you are using in the <SurveyPrompt>...

[Xarkam]

okay, but for https://github.com/Xarkam/Blazorwasm_FluentUI/blob/main/Blazor-FluentUI/Shared/SurveyPrompt.razor#L4 ? The size is correct, but it says it is not found. I tested with sizes 48,16,12,10. It tells me that it can't find any.

[vnbaaij]

Correct, AppListDetail is available only in sizes 20 and 24 apparently!

In general, you can use https://brave-cliff-0c0c93310.azurestaticapps.net/Icon to look up icons and then use the Size dropdown in the Search section to see if a certain size is available.

I'll see if I can make that information more easily available.

[Xarkam]

Unfortunately, I used the tool, but it doesn't seem to work properly. Here a simple search

And after I changed color

[vnbaaij]

Works for me... (notice I searched for AppsListDetail)

[Xarkam]

Here a example demonstrate the tool not work perfectly. We need to validate twice for second search (the search avec S added)

The simplest would be to list all the icons of the same size in the form of a page (why not in a paginated table).

Because here, if we don't have the exact name of the icon, it won't be found. Or, have a more dynamic search like on https://fluenticons.co/

Currently, I would therefore have to go to https://fluenticons.co/ to search for the name of an icon and then return to the components site to search for the icon and check in what size it exists.

[vnbaaij]

Ok, will investigate this. Closing this issue as the search issue is a new one. Can you create a new issue for this (with the fancy gif)? I didn't know about https://fluenticons.co yet. Thanks for that link!