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
• Icon Parameters - Order of Precedence
• Icon in Telerik Component
• Icon Adjustments
• Icons List

Standalone Icon Component

Telerik UI for Blazor comes with the TelerikIcon component that you can use to render icons. It works with the following image types:

• Telerik font icon - You can find the rendered icons and their names in the Icons List section below. Use those names as plain strings.

• Third party font-icon - the IconClass parameter lets you set a CSS class that provides the required font name, font size and content for the ::before pseudoelement.

• Raster image - the ImageUrl is a string points to the image - it can be a path relative to the wwwroot folder, or an absolute URL.

• Raster image sprite - the SpriteClass parameter lets you provide the classes from your site's stylesheet that produce the desired appearance and background positions for your sprites.

Render a standalone icon through the TelerikIcon component

<TelerikIcon Icon="audio" /> @* will render the audio note 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:

1. ImageUrl
2. Icon
3. IconClass
4. 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="filter">I show the Filter icon</TelerikButton>

The result from the code snippet above

Icon Adjustments

This section shows a few examples of adjusting the font icons:

• Size
• Color
• Kendo Icons

Size

You can change the font-size of the icon element in your own CSS rules to change the size of the icons.

Our font icons are designed on a 16px grid base. To achieve a pixel-perfect icon display, scale up by maintaining the 16-unit measure (32, 48, 64, and so on).

Enlarging icons with CSS

@*The first icon is made larger through CSS, the second has the default size*@

<style>
    .large-icons .k-icon {
        font-size: 32px;
    }
</style>

<div class="large-icons">
    <TelerikIcon Icon="filter"></TelerikIcon> Larger icon
</div>
<TelerikIcon Icon="filter"></TelerikIcon> Normal icon

Color

You can change the color CSS rule of the icon element to change its color from the default black.

Change icon color

@*The first icon is made red through CSS, the second has the default color*@

<style>
    .colored-icons .k-icon {
        color: red;
    }
</style>

<div class="colored-icons">
    <TelerikIcon Icon="filter"></TelerikIcon> Red icon
</div>
<TelerikIcon Icon="filter"></TelerikIcon> Normal icon

Kendo Icons

The Telerik UI for Blazor suite shares the same themes with several other component suites made by Progress (such as Kendo UI and UI for ASP.NET Core). This means that the same font icons are available across all these suites and come as features in our stylesheets, and so you can use the icons directly with the rules and HTML rendering that they are designed for without a helper component such as the <TelerikIcon>.

Using such direct HTML may make it easier for you to customize and style icons that you use in your own layouts - it lets you add additional CSS classes directly to their rendering without cascading through a parent element.

To use the icons directly, review the Kendo UI Web Font Icons Library article. It shows all the information you need. The <TelerikIcon> component and other built-in icons in UI for Blazor simply drop the k-i- prefix to make it easier for you.

Use Kendo font icons directly

@*Direct usage of the Kendo UI font icon*@
<span class="k-icon k-i-check"></span>

@*Direct usage of the Kendo icons so you can add more classes directly to them*@
<span class="k-icon k-i-check k-flip-h k-flip-v"></span>

@* The same icon can be rendered through the Blazor component but styling needs a parent to cascade through *@
<TelerikIcon Icon="check"></TelerikIcon>

@* You can add more classes to use the Kendo icons directly through the IconClass parameter
    Consider whether instantiating a component is necessary over using a simple span element*@
<TelerikIcon IconClass="k-icon k-i-check k-flip-h k-flip-v"></TelerikIcon>

Icons List

This section lists the avaialble font icons that come with the Telerik UI for Blazor themes.

Each icon is accompanied by its name that you can use in the Telerik Blazor components where a Telerik Icon parameter is available.

For example, the TelerikIcon component and the TelerikButton component can take the built-in icon names:

<TelerikIcon Icon="caret-tr" />
<br />
<TelerikButton Icon="caret-tr">caret-tr</TelerikButton>

List of icon names to use in Telerik components Icon parameters

• Please wait, the list of icons is loading and rendering...

The Icon list failed to load. You can see the available icons in the Kendo UI Font Icons article. To use them with UI for Blazor, remove the k-i- prefix. If you are seeing this, open an issue to let us know the icon list is broken.

See Also

• Blazor Live Demos
• Kendo UI Web Font Icons Library