cssblazoricons

How can I use additional icons in NavMenu in Blazor 8?


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?


Solution

  • Yes, that is possible.
    But be aware that this might increase your user's download considerably.

    1. In App.razor, add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    2. In NavMenu.razor, remove (3x) the -nav-menu tail fom the icon names (ie, just bi-house-door-fill)

    3. in NavMenu.razor.css, remove the 3 old icons.

    4. 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.