Class SfIcon

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

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfIcon
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfIcon : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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

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
[Parameter]
public string IconCss { get; set; }
Property Value
Type Description
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
[Parameter]
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
[Parameter]
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
[Parameter]
public string Title { get; set; }
Property Value
Type Description
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
RenderTreeBuilder __builder
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type
Task
Overrides

Implements