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:
Telerik UI for Blazor provides a component that you can use to render icons - the
TelerikIcon component. It works with the following types of images (examples of their usage follow):
Telerik font icon - the
Iconparameter takes a Telerik icon from the set we provide out-of-the-box through the
The Visual Studio intellisense should provide you with the available options and you can also see them in the online API Reference.
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
Third party font-icon - the
IconClassparameter lets you set a CSS class that provides the required font name, font size and content for the
Raster image - the
ImageUrlis a string points to the image - it can be a path relative to the
wwwrootfolder, or an absolute URL.
Raster image sprite - the
SpriteClassparameter lets you provide the classes from your site's stylesheet that produce the desired appearance and background positions for your sprites.
<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 priority order of the Icon properties, if more than one is defined, is
This order applies to other components that expose the same parameters, such as the TelerikButton or the grid command buttons.
Some Telerik components expose icon features out-of-the box. These parameters match the
TelerikIcon component described above.
<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>