Built-in Font and SVG Icons
Telerik UI for Blazor provides a large set of built-in icons. There are two ways to consume and render them - as font icons or as SVG icons. It is also possible to use custom icons, or define an application-wide setting, which affects the type of icons in all Telerik Blazor components.
This article contains the following sections:
- How do icons work
-
FontIcon
component -
SvgIcon
component - Set global icon type for the whole application
- Complete list of built-in icons
TelerikFontIcon
replaced theTelerikIcon
component in version 4.0. TheImageUrl
andSpriteClass
parameters are no longer supported.
How Icons Work
The Telerik Blazor components use built-in icons with the help of two NuGet packages. They are installed automatically as dependencies of the Telerik.UI.for.Blazor
package:
-
Telerik.FontIcons
- defines theFontIcon
enum
for easier usage of built-in font icons -
Telerik.SvgIcons
- defines theISvgIcon
interface and theSvgIcon
static class for built-in SVG icons
Unlike the
Telerik.UI.for.Blazor
package, the icon packages are available from thenuget.org
source. Keep this in mind when usingpackageSourceMapping
.
To use the icons, import one or both namespaces, for example in _Imports.razor
:
Register Telerik Blazor icon namespaces
@using Telerik.FontIcons
@using Telerik.SvgIcons
Some components provide icon-related parameters, which can rely on the above packages and namespaces too. For example:
Icon parameter in Telerik Blazor components
<TelerikButton Icon="@FontIcon.Save">Button with font icon</TelerikButton>
<GridCommandButton Icon="@SvgIcon.Save">Command Button with SVG icon</GridCommandButton>
Usually, the app will use only one type of icons. However, it is possible to use standalone Icon components of both types at the same time. The sections below discuss these standalone components.
FontIcon Component
The TelerikFontIcon
component can show a built-in Telerik Blazor font icon or a custom font icon. Here are the available configuration parameters:
Parameter | Type and Default Value | Description |
---|---|---|
Flip |
IconFlip enum ( None ) |
The icon's flip direction, which allows to mirror (turn over) the image horizontally, vertically, or in both directions. |
Icon |
FontIcon enum
|
Any of the built-in Telerik Blazor font icons. This parameter takes precedence over IconClass , if both are set. |
IconClass |
string |
Custom CSS class for a custom third-party icon. Do not use together with the Icon parameter. |
Size |
string ( "md" ) |
Any of the predefined icon sizes (from "xs" to "xxxl" ). It is possible to set the parameter value to raw strings such as "lg" , "md" or "sm" . However, we recommend using the properties of the static ThemeConstants.FontIcon.Size class. |
ThemeColor |
string |
Any of the predefined icon colors. Use the static ThemeConstants.FontIcon.ThemeColor class properties. By default, the icon color will inherit the current CSS text color. |
Using TelerikFontIcon
<TelerikFontIcon Icon="@FontIcon.FileAudio" />
<span style="color: red;">
<TelerikFontIcon Icon="@FontIcon.Save" Size="lg" Flip="@IconFlip.Vertical" />
</span>
<TelerikFontIcon IconClass="my-custom-icon" />
<style>
.my-custom-icon {
/* define a background image or a custom font icon here */
background: purple;
}
</style>
Set Custom Font Icon Size
In addition to the Size
parameter, you can change the size of the rendered icon with custom CSS and the font-size
style.
Our font icons are designed on a 16px grid base. For better display quality, use a font size, which is divisible by 16 (32px, 48px and so on).
Increase icon size with CSS
<style>
.large-icons .k-icon {
font-size: 32px;
}
</style>
<div class="large-icons">
<TelerikFontIcon Icon="@FontIcon.Filter"></TelerikFontIcon>
</div>
<TelerikFontIcon Icon="@FontIcon.Filter"></TelerikFontIcon>
Render Font Icons with HTML
Telerik UI for Blazor shares the same themes with several other Telerik and Kendo UI web component suites. All these products use the same font icons.
You can use the built-in font icons directly via HTML tags, without the <TelerikFontIcon>
helper component. Such direct HTML usage may make it easier for you to customize and style icons that you use in your own layouts.
To use the icons directly, review the Kendo UI Web Font Icons Library article. The <TelerikFontIcon>
component simply drops the k-i-
CSS class prefix to make it easier for you.
Use Kendo font icons directly
<span class="k-icon k-i-check k-flip-h k-flip-v"></span>
is the same as
<TelerikFontIcon Icon="@FontIcon.Check" Flip="@IconFlip.Both" />
SvgIcon Component
The TelerikSvgIcon
component can show a built-in Telerik Blazor SVG icon or a custom SVG icon. Here are the available configuration parameters:
Parameter | Type and Default Value | Description |
---|---|---|
Flip |
IconFlip enum ( None ) |
The icon's flip direction, which allows to mirror (turn over) the image horizontally, vertically, or in both directions. |
Icon |
ISvgIcon |
Assign a property of the SvgIcon static class to use any of the built-in Telerik Blazor font icons. Alternatively, implement your own custom SVG Icon class. |
Size |
string ( "md" ) |
Any of the predefined icon sizes (from "xs" to "xxxl" ). It is possible to set the parameter value to raw strings such as "lg" , "md" or "sm" . However, we recommend using the properties of the static ThemeConstants.SvgIcon.Size class. |
ChildContent |
RenderFragment |
The HTML markup of a custom SVG icon. Do not use together with Icon . |
ThemeColor |
string |
Any of the predefined icon colors. Use the static ThemeConstants.SvgIcon.ThemeColor class properties. |
Using TelerikSvgIcon
<TelerikSvgIcon Icon="@SvgIcon.Calendar" />
<TelerikSvgIcon Icon="@SvgIcon.FileAudio"
Size="@ThemeConstants.SvgIcon.Size.Large"
ThemeColor="@ThemeConstants.SvgIcon.ThemeColor.Primary" />
Render Custom SVG Icons with HTML
The TelerikSvgIcon
component can accommodate a complete <svg>
tag as its ChildContent
. In this way, you have full control over the SVG icon rendering, while using the other component parameters, such as Flip
or Size
.
Do not set the Icon
parameter in this case.
Using custom SVG Icon
<TelerikSvgIcon Flip="@IconFlip.Horizontal">
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>moon</title>
<path d="M8.85028 16.5C11.3178 16.5 13.5715 15.3773 15.0646 13.5378C15.2854 13.2656 15.0446 12.8681 14.7032 12.9331C10.8219 13.6723 7.25756 10.6963 7.25756 6.77825C7.25756 4.52131 8.46575 2.44591 10.4294 1.32844C10.7321 1.15619 10.6559 0.697281 10.312 0.63375C9.82984 0.544842 9.34057 0.500073 8.85028 0.5C4.43437 0.5 0.850281 4.07847 0.850281 8.5C0.850281 12.9159 4.42875 16.5 8.85028 16.5Z" fill="black"></path>
</svg>
</TelerikSvgIcon>
Use Custom SVG Icon Collection
The Icon
parameter of TelerikSvgIcon
expects an ISvgIcon
object. This is a public interface, together with the SvgIconBase
class. You can use them to create a collection of custom SVG icons.
The ISvgIcon
interface members are:
Member | Type | Description |
---|---|---|
Name |
string |
The identifier of the SVG icon. The component renders it as a k-svg-i-name CSS class. |
Content |
string |
All <path> tags inside the <svg> tag. |
ViewBox |
string |
The viewBox attribute value of the <svg> tag. |
Define custom SVG icon collection
<TelerikSvgIcon Icon="@MySvgIcons.Moon" />
@code {
public class Moon : SvgIconBase
{
public Moon()
{
Name = "moon";
Content = "<path d=\"M8.85028 16.5C11.3178 16.5 13.5715 15.3773 15.0646 13.5378C15.2854 13.2656 15.0446 12.8681 14.7032 12.9331C10.8219 13.6723 7.25756 10.6963 7.25756 6.77825C7.25756 4.52131 8.46575 2.44591 10.4294 1.32844C10.7321 1.15619 10.6559 0.697281 10.312 0.63375C9.82984 0.544842 9.34057 0.500073 8.85028 0.5C4.43437 0.5 0.850281 4.07847 0.850281 8.5C0.850281 12.9159 4.42875 16.5 8.85028 16.5Z\" fill=\"rgb(31, 31, 31)\" />";
ViewBox = "0 0 16 17";
}
}
public static class MySvgIcons
{
public static ISvgIcon Moon => new Moon();
//public static ISvgIcon AnotherIcon => new AnotherIcon();
}
}
Set Global Icon Type
It is possible to configure the icon type for the whole application:
- Locate the
<TelerikRootComponent>
tag in the Blazor app. Normally, it's in a layout file such asMainLayout.razor
orTelerikLayout.razor
. - Set the
TelerikRootComponent
IconType
parameter to anIconType
enum value -Svg
orFont
.
The default icon type is
Font
. We plan to switch it toSvg
in mid 2023 for better display.
The global
IconType
setting does not affect<TelerikFontIcon>
and<TelerikSvgIcon>
instances in the app. It will toggle the icon type of all other components, such as Button, Grid, etc.
Define global icon type via TelerikRootComponent
<TelerikRootComponent IconType="@IconType.Svg">
@Body
</TelerikRootComponent>
Icons List
Here is a list of all available built-in icons in Telerik UI for Blazor.
To define an icon with C# syntax, remove the "k-i-" part and use a PascalCase name. For example, k-i-caret-tr
will become FontIcon.CaretTr
or SvgIcon.CaretTr
.
Built-in Telerik Blazor Icons
Please allow a few seconds for all icons to render. It is also possible to open the frame as a standalone web page.