How do I use Bootstrap Icons in C# Blazor WebAssembly?

Question

I'm making a Blazor WebAssembly website in Microsoft Visual Studio 2022 and I'm having some trouble getting the bootstrap icons to show up on the navmenu. I installed the icons via npm and copied the bootstrap folder to my wwwroot in the project viewer.

My code for the navmenu item looks like this:

<div class="nav-item px-3">
            <NavLink class="nav-link" href="Spotify">
                <span class="bi bi-spotify" aria-hidden="true"></span> Spotify
            </NavLink>
    </div>

The default for the span class was span class="oi oi-plus" and it ran fine and that icon showed up, but when I run the program with the new span class code as above, the icon doesn't show up on next to the text or anywhere at all.

Answer 1

You need only copy bootstrap-icons.svg from bootstraps repo. Put this in a folder within your wwwroot folder.

For example to create emoji-smile-fill use.

<svg class="bi" width="24" height="24" fill="currentColor" >
    <use href="{folder-to-resource}/bootstrap-icons.svg#emoji-smile-fill"></use>
</svg>