How to change the default icon provider in Blazor app?

Question

When you first make a Blazor project, the default icon provider is Iconify, with their open icon pack.

How can I change the icon provider?

Most sites provide some JavaScript to include in an html page, which I don't use since I'm using a Blazor page.

What do I need to do to switch my provider over?

Answer 1

The icons are comming from @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); from site.css

Import different icons

I have used Material Icons

1.Imported material icon in site.css @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

2.Use the Material Icons

Example:

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <i class="material-icons">
                    accessibility
                </i> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <i class="material-icons">autorenew</i>
                Counter
            </NavLink>
        </li>
    </ul>
</div>

Answer 2

What worked for is to put the following link on the head tag, then I was able to get the icons

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

then access the icons like so

<i class="material-icons">face</i>

For more info check this document