Blazor Icons Library
31 May 20245 minutes to read
The Syncfusion Blazor library provides the set of base64 formatted font icons which are being used in the Syncfusion Blazor components. These icons can be utilized in the web applications using SfIcon component or e-icons class.
Check out the video to quickly get started with the Blazor Icon component:
Icon component
Syncfusion Icon component provides support to render predefined Syncfusion icons or custom font icons.
You can refer Getting Started with Syncfusion Blazor for Server-side in Visual Studio page for the introduction and configuring the common specifications.
The following code example shows the rendering of built-in Syncfusion icons from predefined IconName options using Name property by defining them in SfIcon tag.
@using Syncfusion.Blazor.Buttons
<SfIcon Name="IconName.Cut"></SfIcon>
<SfIcon Name="IconName.Copy"></SfIcon>
<SfIcon Name="IconName.Paste"></SfIcon>
<SfIcon Name="IconName.Bold"></SfIcon>
<SfIcon Name="IconName.Underline"></SfIcon>
<SfIcon Name="IconName.Italic"></SfIcon>
Icon size
The font size of the icon can be changed using the Size property. The icon displays Medium size by default.
- When IconSize set to Small, the font size will be
8px. - When IconSize set to Medium, the font size will be
16px. - When IconSize set to Large, the font size will be
24px.
@using Syncfusion.Blazor.Buttons
<p>Smaller icons</p>
<SfIcon Name="IconName.Cut" Size="IconSize.Small"></SfIcon>
<SfIcon Name="IconName.Copy" Size="IconSize.Small"></SfIcon>
<SfIcon Name="IconName.Paste" Size="IconSize.Small"></SfIcon>
<SfIcon Name="IconName.Bold" Size="IconSize.Small"></SfIcon>
<SfIcon Name="IconName.Underline" Size="IconSize.Small"></SfIcon>
<SfIcon Name="IconName.Italic" Size="IconSize.Small"></SfIcon>
<p>Medium icons</p>
<SfIcon Name="IconName.Cut" Size="IconSize.Medium"></SfIcon>
<SfIcon Name="IconName.Copy" Size="IconSize.Medium"></SfIcon>
<SfIcon Name="IconName.Paste" Size="IconSize.Medium"></SfIcon>
<SfIcon Name="IconName.Bold" Size="IconSize.Medium"></SfIcon>
<SfIcon Name="IconName.Underline" Size="IconSize.Medium"></SfIcon>
<SfIcon Name="IconName.Italic" Size="IconSize.Medium"></SfIcon>
<p>Larger icons</p>
<SfIcon Name="IconName.Cut" Size="IconSize.Large"></SfIcon>
<SfIcon Name="IconName.Copy" Size="IconSize.Large"></SfIcon>
<SfIcon Name="IconName.Paste" Size="IconSize.Large"></SfIcon>
<SfIcon Name="IconName.Bold" Size="IconSize.Large"></SfIcon>
<SfIcon Name="IconName.Underline" Size="IconSize.Large"></SfIcon>
<SfIcon Name="IconName.Italic" Size="IconSize.Large"></SfIcon>
NOTE
The
Sizeproperty is applicable only when defining the icon usingNameproperty. Otherwise, use IconCss property to customize the icon.
Tooltip for icons
Title property is used to set title attribute for the icon to improve accessibility with screen readers and shows a tooltip on mouseover. The following example code displays tooltip text for appropriate icons.
@using Syncfusion.Blazor.Buttons
<SfIcon Name="IconName.Upload" Title="Upload"></SfIcon>
<SfIcon Name="IconName.Download" Title="Download"></SfIcon>
<SfIcon Name="IconName.Undo" Title="Undo"></SfIcon>
<SfIcon Name="IconName.Redo" Title="Redo"></SfIcon>
<SfIcon Name="IconName.AlignTop" Title="AlignTop"></SfIcon>
<SfIcon Name="IconName.AlignBottom" Title="AlignBottom"></SfIcon>
<SfIcon Name="IconName.AlignMiddle" Title="AlignMiddle"></SfIcon>
Icon appearance customization
The SfIcon supports to customize color and size by overriding the e-icons class.
The following example code demonstrates the custom font-size and color for icons.
@using Syncfusion.Blazor.Buttons
<SfIcon Name="IconName.AlignLeft"></SfIcon>
<SfIcon Name="IconName.AlignRight"></SfIcon>
<SfIcon Name="IconName.AlignCenter"></SfIcon>
<SfIcon Name="IconName.Justify"></SfIcon>
<SfIcon Name="IconName.DecreaseIndent"></SfIcon>
<SfIcon Name="IconName.IncreaseIndent"></SfIcon>
<style>
.e-icons{
color: #ff0000;
font-size: 26px !important;
}
</style>
Third party icons integration
The SfIcon supports to render custom font icons using the IconCss property. To render custom font icons define the required font CSS that provides the required font name, font size, and content for the icon.
The following code explains how to render open-iconic icons using IconCss property.
Include the stylesheet reference in the <head> section of the ~/App.razor file as shown below:
<head>
....
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" rel="stylesheet">
</head>@using Syncfusion.Blazor.Buttons
<SfIcon IconCss="oi oi-list-rich"></SfIcon>
<SfIcon IconCss="oi oi-account-login"></SfIcon>
<SfIcon IconCss="oi oi-account-logout"></SfIcon>
<SfIcon IconCss="oi oi-action-redo"></SfIcon>
<SfIcon IconCss="oi oi-action-undo"></SfIcon>
<SfIcon IconCss="oi oi-clock"></SfIcon>
<SfIcon IconCss="oi oi-audio"></SfIcon>
<SfIcon IconCss="oi oi-bluetooth"></SfIcon>
HTML attribute support
You can add the additional HTML attributes to the icon element using HtmlAttributes property. HTML attributes can be added by specifying as inline attributes or by specifying @attributes razor directive.
The following example shows the icon font size customization using @attributes directive.
@using Syncfusion.Blazor.Buttons
<SfIcon Name="IconName.Copy" @attributes="customAttribute"></SfIcon>
@code{
Dictionary<string, object> customAttribute = new Dictionary<string, object>()
{
{ "style", "font-size: 20px" }
};
}Icon integration with Button component
The built-in Syncfusion icons can be integrated with other Blazor components without defining the <SfIcon> tag. To use Syncfusion icons, add e-icons class that contains the font-family and common property of the font icons. Add the icon class with the corresponding icon name from the available icons with e- prefix.
The following example shows how to integrate the icons with Syncfusion button component by defining the icon class in the IconCss property of button.
@using Syncfusion.Blazor.Buttons
<SfButton IconCss="e-icons e-chevron-down-fill" Content="Show dropdown" IconPosition="IconPosition.Right"></SfButton>
Using icons directly in HTML element
The built-in Syncfusion icons can be rendered directly in the HTML element by defining e-icons class that contains the font-family and common property of font icons, and defining the available icon’s class with e- prefix.
The following code example explains the direct rendering of Syncfusion search icon in the span element.
<span class="e-icons e-search"></span>Icons list
The complete pack of Syncfusion Blazor icons is listed in the following table. The corresponding icon content can be referred to the content section.