How to see all icons available in the Blazor project template

Recently i was trying to change the icon for one of the NavMenu items in a Blazor project. I was trying to figure out which icons are shipped with the default Blazor template.

The icons in the template come from the open iconic project. Have a look at the <project>/wwwroot/css/open-iconic/ file that is part of the Blazor template. There you can find the following description:

Open Iconic is the open source sibling of Iconic. It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. View the collection

At the end you can see the “View the collection” link that links to the github project site. On that site, there is another ‘View the collection’ link that redirects you to but that link does not work (i think the domain was taken from somebody else). Fortunately in the corresponding github issue, somebody points out a link to a working icon collection:

On that page, you can find a collection of all the icons and their names. You can use these icons in your Blazor project by inserting a span and setting the oi and oi-<iconName> classes. Example:

    <span class="oi oi-sun" aria-hidden="true" />

Leave a Comment

Your email address will not be published. Required fields are marked *