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

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 >
            <NavLink  href="Spotify">
                <span  aria-hidden="true"></span> Spotify
            </NavLink>
    </div>

The default for the span class was span 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.

CodePudding user response：

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  width="24" height="24" fill="currentColor" >
    <use href="{folder-to-resource}/bootstrap-icons.svg#emoji-smile-fill"></use>
</svg>