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 HTML attributes that will be applied to the icon element.

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

A System.Collections.Generic.Dictionary<, > of System.String and System.Object containing additional attributes for the icon element. The default value is an empty dictionary.
Remarks

Additional attributes can be added by specifying them as inline attributes or by specifying the @attributes directive. These attributes allow further customization such as styles, ARIA labels, or data attributes. If the class attribute is specified, its value will be merged into the icon's CSS class attribute.

Examples

In the below code example, the font size of the icon is customized using the @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 that can be used to display a custom icon or apply custom styles to icons rendered by this component.

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

A string containing one or more CSS class names, separated by spaces. The default value is string.Empty.
Remarks

The IconCss property is used to append custom classes to the icon element, allowing the use of custom font icons such as FontAwesome, Open Iconic, or applying targeted custom styling. If this property is set while using built-in icon names, both classes will be applied.

Examples

In the following example, a custom icon is loaded using the IconCss property.

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

In the following example, the icon color is customized using the IconCss property.

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

Name

Gets or sets the name of a predefined Syncfusion icon to render in the SfIcon component.

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

An IconName enum value specifying the icon glyph to display. The default is determined by the consuming markup.
Remarks

Set the Name property to a value from the IconName enumeration to render a built-in Syncfusion icon glyph. To use a custom or third-party icon, use the IconCss property instead. When both Name and IconCss are specified, both glyph classes will be applied.

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

Size

Gets or sets the size of the icon in the SfIcon component.

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

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

The Size property is only effective when using a built-in icon via the Name property. If a custom icon is used via IconCss, the icon's size is determined by the applied custom CSS. Use this property to visually scale Syncfusion predefined icons.

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

Title

Gets or sets the title attribute for the icon, used to display tooltips and improve accessibility of the SfIcon.

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

A string representing the title attribute value. The default is string.Empty.
Remarks

The Title property provides a tooltip on mouse-over and assists screen readers to describe the icon content, which helps to enhance accessibility for users with assistive technologies.

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