Blazorの既定テンプレートではBootstrapでデザインしたページが表示されます。ちょっと改造しようとページを足して、Bootstrapアイコンを指定してもアイコンが表示されません。本番アプリケーションではちゃんとデザインシステムを作成するかFluent UIなどのコンポーネントを使用すると思いますが、せっかくやり方を調べたのでメモしておきます。
App.razor
<head>
・・・
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</headL
NavMenu.razor
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="nav flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
- <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+ <i class="bi bi-house-door-fill" aria-hidden="true" style="font-size: 1.5rem; line-height: 0;"></i> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
- <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
+ <i class="bi bi-list-nested" aria-hidden="true" style="font-size: 1.5rem; line-height: 0;"></i> Weather
</NavLink>
</div>
</nav>
<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
- <span class="bi bi-list-nested" aria-hidden="true"></span> Weather
+ <i class="bi bi-list-nested" aria-hidden="true" style="font-size: 1.5rem; line-height: 0;"></i> Weather
</NavLink>
</div>
</div>
新しいページを追加し、新しいアイコンを表示する場合はNavMenu.razorに次のように追加します。
NavMenu.razor
<div class="nav-item px-3">
<NavLink class="nav-link" href="todo">
<i class="bi bi-list-task" aria-hidden="true" style="font-size: 1.5rem; line-height: 0;"></i> Todo
</NavLink>
</div>
アイコンの指定はiタグの中のclass指定です。Bootstrapアイコンページで使いたいアイコンを選択すると、クラス名が書いてあります。この例だとbi-list-taskのことです。