Blazor icons library

22 Oct 20255 minutes to read

The Syncfusion® Blazor library provides a set of base64-formatted font icons used across Syncfusion® Blazor components. Icons can be used via the SfIcon component or the e-icons CSS class.

Watch a quick-start video for the Blazor Icon component:

Icon component

Syncfusion® Icon component provides support to render predefined Syncfusion® icons or custom font icons.

Refer to the Getting started with Syncfusion Blazor Web App guide for installation and common configuration.

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>

Blazor Icon Component

Icon size

The font size of the icon can be changed using the Size property. The default size is Medium.

  • 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>

Icon size customization Blazor Icon Component

NOTE

The Size property is applicable only when defining the icon using Name property. 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>

ToolTip for Blazor Icon Component

Icon appearance customization

The SfIcon supports customizing 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>

Blazor Icon Component Customization

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:

Example link tag:

<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>

Load custom icon in Blazor Icon Component

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 with Blazor Button Component

Use icons directly in an HTML element

Built-in Syncfusion® icons can be rendered directly in an HTML element by adding the e-icons class (font family and common properties) and the available icon class with the 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.

Material 3

Bootstrap 5

Bootstrap 4

Bootstrap

Material

Tailwind CSS

Office Fabric

High Contrast

Fluent