Blazor 8中如何为NavMenu添加并使用额外图标？

方法一：沿用Blazor 7的全局图标集（最便捷） #

• 新建wwwroot/css目录，把Blazor 7项目里的图标CSS文件（比如bootstrap-icons.css）复制过来，或者直接下载对应图标库的CSS文件放到这里
• 在项目根布局文件中引入该CSS：
  • WebAssembly项目：在App.razor里添加 <link href="css/bootstrap-icons.css" rel="stylesheet" />
  • Server项目：在_Layout.cshtml的<head>区域添加同样代码
• 之后在NavMenu.razor里直接用图标类名，和Blazor 7操作完全一致，示例：

  <NavLink class="nav-link" href="calendar">
      <span class="bi bi-calendar-event"></span> 日历页面
  </NavLink>
  

方法二：在隔离CSS中添加自定义图标 #

如果不想依赖全局图标集，可在NavMenu.razor.css里单独配置：

1. 把图标SVG文件放到wwwroot/images/icons目录（无则新建）
2. 在NavMenu.razor.css中添加图标样式：

   .icon-my-custom::before {
       content: "";
       display: inline-block;
       width: 1rem;
       height: 1rem;
       background-image: url('../images/icons/my-custom-icon.svg');
       background-size: contain;
       background-repeat: no-repeat;
       vertical-align: middle;
       margin-right: 0.5rem;
   }
   

3. 在NavMenu.razor里调用：

   <NavLink class="nav-link" href="custom">
       <span class="icon-my-custom"></span> 自定义页面
   </NavLink>
   

方法三：模仿默认模板的内嵌SVG图标 #

Blazor 8默认导航图标用内嵌SVG的Data URL实现，你可以直接复制SVG代码转成Data URL添加：

1. 复制所需的SVG图标代码（比如从Bootstrap Icons官网获取）
2. 在NavMenu.razor.css里给新导航项添加样式：

   .nav-item .nav-link.icon-clock::before {
       background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>');
   }
   

3. 在NavMenu.razor里使用：

   <NavLink class="nav-link icon-clock" href="clock">
       时钟页面
   </NavLink>
   

内容的提问来源于stack exchange，提问作者Dave_B.