Icon Class

Contains identifiers/names for adaptive icons (appropriate icons are automatically selected based on the current theme and UI settings).

Namespace: DevExpress.Images.Blazor

Assembly: DevExpress.Images.Blazor.v26.1.dll

NuGet Package: DevExpress.Images.Blazor

Declaration

public static class Icon

Remarks

DevExpress Blazor components can display predefined icons from the DevExpress Icon Library.

Important

The DevExpress Icon Library is currently available as a community technology preview (CTP).

Explore Icons

The DevExpress Icon Library includes over 13,000 icons designed to address a variety of UI requirements. Icons are categorized by the following attributes:

• Set: Fluent, Desktop Classic, Blazor Classic
• Style: Regular, Light, Filled
• Color: Multicolor, Monochrome
• Size: 12, 16, 20, 24, 28, 32, 48

You can browse available icons in the Icon Explorer demo. The demo includes the following capabilities:

• Find icons by name or associated tag using the built-in search panel.
• Filter icons by attribute.
• Display detailed icon information (including API identifiers that you can copy directly into code).

Run Demo: Icon Explorer

To view the Icon Explorer demo locally, open the DevExpress product installation folder, run the Demo Center, and proceed to Icon Library → Icon Explorer.

Use Icons

To incorporate icons from the DevExpress Icon Library into a Blazor application, install the DevExpress.Images.Blazor NuGet package and register the corresponding namespace in the _Imports.razor file:

@using DevExpress.Images.Blazor

You can assign icons to Blazor components using their IconUrl properties (such as DxAccordionItem.IconUrl or DxRibbonItem.IconUrl).

Note

DxMap.MarkerIconUrl and DxMapMarker.IconUrl properties do not support the DevExpress Icon Library.

Based on the way you reference an icon, Blazor components can display adaptive or static icons.

Adaptive Icons

Assign icons by their adaptive identifiers, also called metaphors. These identifiers include only icon names and do not specify size or style. The framework automatically selects the appropriate icon version based on the current theme and UI settings.

Example: IconUrl="@Icon.Cancel"

Static Icons

Assign icons using full identifiers that specify the theme set, style, color, and size. Unlike adaptive icons, static icons do not change based on the theme or UI settings.

Example: IconUrl="@IconStatic.Cancel.Fluent.Regular.Multicolor.Size16"

Display Adaptive Icons

To display adaptive icons in Blazor components, use the Icon class and specify icon identifiers (names).

The following code snippet uses icon names to assign adaptive icons to commands in the DevExpress Blazor Ribbon component:

Index.razor

<DxRibbon SizeMode="@Params.SizeMode"
@* ... *@
    <DxRibbonTab Text="Home">
        <DxRibbonGroup Text="Mail">
            <DxRibbonItem Text="New Mail"
                          IconUrl="@Icon.Mail"
                          SplitDropDownButton="true"
                          IsPrimary="true"
                          Tooltip="New Mail">
                <DxRibbonItem Text="New Mail"
                              IconUrl="@Icon.Mail"
                              Tooltip="New Mail"/>
                <DxRibbonItem Text="New Meeting"
                              IconUrl="@Icon.CalendarToday"
                              Tooltip="New Meeting"/>
            </DxRibbonItem>
            <DxRibbonItem Text="Delete"
                          IconUrl="@Icon.Delete"
                          Tooltip="Delete"/>
            <DxRibbonItem Text="Archive"
                          IconUrl="@Icon.Archive"
                          IconCssClass="icon-color-green"
                          Tooltip="Archive"/>
            <DxRibbonItem Text="Sweep"
                          IconUrl="@Icon.ClearHistory"
                          Tooltip="Sweep"/>
            <DxRibbonItem Text="Move to"
                          IconUrl="@Icon.FolderArrowRight"
                          IconCssClass="icon-color-blue"
                          Tooltip="Move to"/>
        </DxRibbonGroup>
        <DxRibbonGroup Text="Tags">
            <DxRibbonItem Text="Chat"
                          IconUrl="@Icon.ChatPerson"
                          IconCssClass="icon-color-green"
                          Tooltip="Chat">
                <DxRibbonItem Text="Chat with all participants"
                              IconUrl="@Icon.ChatPerson"
                              IconCssClass="icon-color-green"
                              Tooltip="Chat with all participants"/>
            </DxRibbonItem>
            <DxRibbonItem Text="Categorize"
                          IconUrl="@Icon.Tag"
                          Tooltip="Categorize">
                <DxRibbonItem Text="New category"
                              Tooltip="New category"/>
                <DxRibbonItem Text="Manage categories"
                              Tooltip="Manage categories"/>
            </DxRibbonItem>
            <DxRibbonItem Text="Flag/Unflag"
                          IconUrl="@Icon.Flag"
                          SplitDropDownButton="true"
                          Tooltip="Flag/Unflag">
                          @* ... *@
            </DxRibbonItem>
            <DxRibbonItem Text="Snooze"
                          IconUrl="@Icon.Clock"
                          Tooltip="Snooze"/>
        </DxRibbonGroup>
        <DxRibbonGroup Text="Print">
            <DxRibbonItem Text="Print"
                          IconUrl="@Icon.Printer"
                          Tooltip="Print"/>
        </DxRibbonGroup>
        @* ... *@
</DxRibbon>

FluentColor.css

.icon-color-green {
    color: var(--dxds-icon-color-green);
}

.icon-color-blue {
    color: var(--dxds-icon-color-blue);
}

.icon-color-red {
    color: var(--dxds-icon-color-red);
}

Imports.razor

@using DevExpress.Images.Blazor

Run Demo: Icon Library - Display Adaptive Icons

Inheritance

Object

Icon