The documentation could be better for this. Looking at the projects Github I found WHATSNEW.md
An issue has surfaced in hosted Blazor projects with version 2.1 and
higher. The Client project does not work correctly unless the package
is also added to the Server project (without any further changes to
the Server's .csproj file). We are working together with the AS.NET
Core team to solve this. See dotnet/aspnetcore#47135
Adding Microsoft.Fast.Components.FluentUI to my server project as well solved the issue.
Now the project loaded correctly.
Including reboot.css caused MatBlazor MatTable to have very small text:
I therefore only included the variables like this:
<link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" />
When this was done I only had this error left:
blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: The requested icon (Delete, Size16, Regular) is not available in the collection
System.ArgumentException: The requested icon (Delete, 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()
WHATSNEW.md had a solution for this as well. Add PropertyGroup to client AND server .csproj. Even though documentation says without any further changes to the Server's .csproj file this is not true. It will not load icons unless this is done.
<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,28,32,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,People_Body,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,Flat,HighContrast</FluentEmojiStyles>
</PropertyGroup>
Then modify client Program.cs:
Remove:
builder.Services.AddFluentUIComponents();
Add:
LibraryConfiguration config = new(ConfigurationGenerator.GetIconConfiguration(), ConfigurationGenerator.GetEmojiConfiguration());
builder.Services.AddFluentUIComponents(config);
Now I could start to adapt my code to the new syntax. The classes I had to modify most was FluentIcon and FluentDataGrid
For FluentIcon syntax changed from this:
<FluentIcon Name=@FluentIcons.Delete Slot="start" Size=IconSize.Size16 Filled=true UseAccentColor=false />
To this as an example:
<FluentIcon Name=@FluentIcons.Delete Slot="start" Size=IconSize.Size16 Variant=IconVariant.Filled Color="@Color.Fill" />
FluentDataGrid changed a lot by removing ColumnDefinition, RowItemTemplate and FluentDataGridRow.
Another thing to note:
<link href="{PROJECT_NAME}.styles.css" rel="stylesheet" />
Should be the Blazor WebAssembly client project name so something like this:
<link href="YourProjectName.Client.styles.css" rel="stylesheet" />
