I want to use additional icons in the NavMenu.razor
in my Blazor 8 application. In Blazor 7 there was a iconset configured in wwwroot/css/
, and so I was able to use additional icons only with naming it in the NavMenu.razor
. But the whole css folder is missed in the Blazor 8 template.
There are only three icons configured in the NavMenu.razor.css
, but I don't know how to add additional icons there.
I'm not a css expert. Is it possible to get new icons likely easily like in Blazor 7?
Yes, that is possible.
But be aware that this might increase your user's download considerably.
In App.razor, add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
In NavMenu.razor, remove (3x) the -nav-menu
tail fom the icon names (ie, just bi-house-door-fill
)
in NavMenu.razor.css, remove the 3 old icons.
in NavMenu.razor.css, in the .bi
class, set top: -0.75rem;
That last one is a quick fix for aligning the icons, you may want to fine-tune that css class a little more.