Class SfIcon

SfIcon component used to render the predefined syncfusion icons using Name property or custom font icons using IconCss property.

Inheritance
System.Object
SfBaseComponent
SfIcon
Inherited Members
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfIcon : SfBaseComponent
Examples

The below example shows loading syncfusion icon using Name property.

<SfIcon Name="IconName.Italic" Title="Italic"></SfIcon>

The below example shows loading syncfusion icon using IconCss property.

<SfIcon IconCss="e-icons e-bold" Title="Bold"></SfIcon>

The below example shows loading third party icon using SfIcon component. Plus icon were loaded from open iconic, by defining the open iconic font CSS.

<SfIcon IconCss="oi oi-plus" Title="Plus"></SfIcon>

Constructors

SfIcon()

Declaration
public SfIcon()

Properties

HtmlAttributes

Gets or sets a collection of additional attributes that will be applied to icon element.

Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type
System.Collections.Generic.Dictionary<System.String, System.Object>
Remarks

Additional attributes can be added by specifying as inline attributes or by specifying @attributes directive.

Examples

In the below code example, font size of the icon customized using @attributes directive.

<SfIcon Name="IconName.Copy" @attributes="customAttribute"></SfIcon>
@code{
   Dictionary<string, object> customAttribute = new Dictionary<string, object>()
   {
       { "style", "font-size: 20px" }
   };
}

IconCss

Gets or sets a CSS class string which can be used to provide custom icon or custom style for icons.

Declaration
public string IconCss { get; set; }
Property Value
Type Description
System.String

Accepts a CSS class string separated by space to provide custom icon or custom style for icons. The default value is String.Empty.
Remarks

IconCss property used to append custom class to the predefined icons. This property will also render the customized icons like font-awesome icons.

Examples

In the below example custom icon is loaded using IconCss property.

<SfIcon IconCss="oi oi-home"></SfIcon>

In the below example icon color is customized using IconCss property.

<SfIcon IconCss="oi oi-plus color-red"></SfIcon>
<style>
    .color-red {
       color: red; 
    }
</style>

Name

Gets or sets the name of the built-in syncfusion icons to render.

Declaration
public IconName Name { get; set; }
Property Value
Type Description
IconName

One of the IconName enumeration.
Remarks

This property is used to render icons from predefined IconName options. You can use IconCss to load custom icons.

Examples
<SfIcon Name="IconName.Bold"></SfIcon>

Size

Gets or sets the size of the icon.

Declaration
public IconSize Size { get; set; }
Property Value
Type Description
IconSize

One of the IconSize enumeration that specifies the size of the icon. The default value is Medium
Remarks

The Size property used to set font size for icons. This property will considered only when icons are rendered using Name property.

Examples
<SfIcon Name="IconName.Paste" Size="IconSize.Large"></SfIcon>

Title

Gets or sets title attribute for icon.

Declaration
public string Title { get; set; }
Property Value
Type Description
System.String

Accepts a string. The default value is String.Empty.
Remarks

Title attribute used to improve accessibility with screen readers and show a tooltip on mouse over the icon.

Examples
<SfIcon Name="IconName.Cut" Title="Cut"></SfIcon>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
System.Threading.Tasks.Task