Built-in Icons
The UI for Blazor suite comes with a set of font icons that you can use in various places like in the Button component, or as a standalone component.
In this article:
Standalone Icon Component
We provide a component that you can use to render icons - the TelerikIcon component. Its Icon parameter takes a Telerik icon from the set we provide out-of-the-box, and you can also configure it to use your own font icons, raster icons or even image sprites.
To use a Telerik font icon, you can set the Icon property to a member of the Telerik.Blazor.IconName static class. The Visual Studio intellisense should provide you with the available options.
You can find the full list of available icons in the Kendo UI Web Font Icons Library article. The names of the icons match the classes you see in the article, but without the k-i- prefix. You can use them as hardcoded strings as well. Their corresponding class members are in CamelCase.
Render a standalone font icon through the TelerikIcon component
<TelerikIcon Icon="@IconName.Audio" /> @* will render the audio note icon *@
@* <TelerikIcon Icon="audio" /> *@ @* This would also render the same audio icon *@
<TelerikIcon IconClass="oi oi-home" /> @* home icon from OpenIconic, assuming you have loaded the font on the page, you can use your own CSS classes and font icon fonts *@
<TelerikIcon ImageUrl="https://docs.telerik.com/blazor-ui/images/snowboarding.png" /> @* an image by URL, renders an actual <img /> tag *@
The result from the snippet above
Icon Parameters - Order of Precedence
The priority order of the Icon properties, if more than one is defined, is
- ImageUrl
- Icon
- IconClass
- SpriteClass
This order applies to other components that expose the same parameters, such as the TelerikButton or the grid command buttons.
Icon in Telerik Component
Some Telerik components expose icon features out-of-the box. These parameters match the TelerikIcon component described above.
How to use a built-in font icon class on a component's Icon property
<TelerikButton Icon="@IconName.Filter">I show the Filter icon</TelerikButton>
<br />
<TelerikButton Icon="filter">I also show the Filter icon through a hardcoded class name</TelerikButton>
The result from the code snippet above
