BlazorLeaflet

The SVG sprite allows you to load all icons in a single request. To use an icon, reference its ID within the open-iconic.svg file using the <use> tag.

Styling Tips:

• Sizing: Set equal width and height on the <svg> tag.
• Coloring: Use the CSS fill property on the <use> tag to change the icon color.
• Best Practice: Add a general class to the <svg> tag and a unique class to the <use> tag for easier styling.

<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

You can display icons as standard SVG images. This is recommended for simplicity and accessibility. Always include an alt attribute for screen readers.

<img src="/open-iconic/svg/icon-name.svg" alt="icon name">

To use the default Open Iconic icon font without Bootstrap or Foundation, include the base stylesheet and use the oi class with the data-glyph attribute.

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">

<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

To use Open Iconic with Foundation, include the Foundation-specific stylesheet and use the fi- prefix for icon classes.

<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">

<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

To use Open Iconic with Bootstrap, include the Bootstrap-specific stylesheet and use the oi class combined with the specific icon class name.

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>