使用Fluent UI Blazor时ArrowCircleLeft图标加载异常求助

问题核心 #

错误提示明确说明请求的ArrowCircleLeft（Size20、Regular风格）未在图标集合中注册——Fluent UI Blazor的图标需要显式注册后才能使用，默认不会加载所有图标资源。

解决方案 #

1. 显式注册目标图标 #

在项目的Program.cs中添加图标注册代码，将需要的图标加入集合：

// 基础组件注册（已存在则无需重复添加）
builder.Services.AddFluentUIComponents();

// 注册Regular风格、20尺寸的ArrowCircleLeft图标
builder.Services.AddFluentIcons(icons =>
{
    icons.AddRegularIcons(IconSize.Size20, new[] { FluentIcons.ArrowCircleLeft });
});

如果需要使用多个同风格同尺寸的图标，可批量注册整个组：

// 注册所有Regular风格20尺寸的图标
builder.Services.AddFluentIcons(icons => icons.AddRegularIcons(IconSize.Size20));

2. 验证图标风格与尺寸匹配 #

确认ArrowCircleLeft是否支持你指定的风格和尺寸：

• 若该图标无Regular风格20尺寸版本，可尝试切换为Filled风格，并同步注册对应图标：

  <div style="display:flex">
      <FluentIcon Name="@FluentIcons.ArrowCircleLeft" Style="@IconStyle.Filled" />    
  </div>
  

  对应注册代码：

  builder.Services.AddFluentIcons(icons =>
  {
      icons.AddFilledIcons(IconSize.Size20, new[] { FluentIcons.ArrowCircleLeft });
  });
  

3. 更新组件包版本 #

旧版本的Microsoft.Fast.Components.FluentUI可能缺少部分图标，通过NuGet包管理器将组件更新至最新稳定版，确保图标资源完整。

内容的提问来源于stack exchange，提问作者star akvo