Cannot provide a value for property 'IconService' on type 'Microsoft.Fast.Components.FluentUI.FluentIcon'

Question

I'm receiving the following error in browser:

Cannot provide a value for property 'IconService' on type 'Microsoft.Fast.Components.FluentUI.FluentIcon'. There is no registered service of type 'Microsoft.Fast.Components.FluentUI.IconService'.

https://learn.microsoft.com/en-us/fluent-ui/web-components/components/button?pivots=blazor

https://github.com/microsoft/fast-blazor/blob/main/examples/FluentUI.Demo.Shared/Pages/ButtonPage.razor

https://brave-cliff-0c0c93310.azurestaticapps.net/ButtonPage

This is when using example code from Microsoft Blazor:

<h3>With content and icon</h3>
<h4>With start</h4>
<FluentButton>
    Button
   <FluentIcon Name="@FluentIcons.Globe" Slot="start" Size="@IconSize.Size16" Filled=false />
</FluentButton>

A single button renders fine but when I use FluentIcon I get a runtime error.

I have followed this getting started guide:

https://learn.microsoft.com/en-us/fluent-ui/web-components/integrations/blazor

I have also looked at Icon examples but with no luck:

https://brave-cliff-0c0c93310.azurestaticapps.net/IconPage

Answer 1

You need to add the code below to Program.cs for your Blazor client. For some reason this is only documented on Github but not https://learn.microsoft.com.

builder.Services.AddFluentUIComponents();

https://github.com/microsoft/fast-blazor