Icons

• Nov 19, 2024
• 4 minutes to read

You can see predefined icons in different DevExpress Blazor components, for example, in an expand button in an Accordion and TreeView, series legend items in a Chart, etc. DevExpress Blazor components also support custom icons from DevExpress icon libraries, Iconic, Bootstrap-recommended libraries, or any other library of your choice.

View Example: Grid - How to use icons instead of default command buttons Watch Video: Applying CSS Styles and Adding Icons to Blazor Components

Add Custom Icons to DevExpress Blazor Components

Predefined component icons are 16 by 16 pixels in size. You can specify this size for your custom icons for the UI consistency.

Use the IconUrl property to specify a URL for an icon in the following navigation and layout components:

Component	Unbound Mode	Bound Mode
DxAccordion	AccordionItem.IconUrl	DxAccordionDataMapping.IconUrl
DxContextMenu	ContextMenuItem.IconUrl	DxContextMenuDataMapping.IconUrl
DxFormLayoutGroup	HeaderIconUrl	Not Applicable
DxFormLayoutTabPage	HeaderIconUrl	Not Applicable
DxMenu	MenuItem.IconUrl	DxMenuDataMapping.IconUrl
DxTab / DxTabPage	DxTabBase.TabIconUrl	Not Applicable
DxToolbar	DxToolbarItemBase.IconUrl	DxNavigationDataMappingBase.IconUrl
DxTreeView	TreeViewNode.IconUrl	DxTreeViewDataMapping.IconUrl

Specify the IconCssClass property to change the appearance of the icon specified by the IconUrl property. The following code snippet assigns an icon to a toolbar item and specify its size:

Unbound Mode

<style>
    .my-style {
        width: 16px;
    }
</style>

<DxTreeView>
    <Nodes>
        <DxTreeViewNode Name="Overview" 
                        Text="Overview" 
                        NavigateUrl="https://demos.devexpress.com/blazor/"
                        IconUrl="images/Info.svg"
                        IconCssClass="my-style" />
        <DxTreeViewNode Name="Editors" Text="Data Editors" />
        <DxTreeViewNode Name="FormLayout" Text="Form Layout" NavigateUrl="https://demos.devexpress.com/blazor/FormLayout" />
        <DxTreeViewNode Name="TreeView" Text="TreeView" NavigateUrl="https://demos.devexpress.com/blazor/TreeView" />
    </Nodes>
</DxTreeView>

Bound Mode

<style>
    .my-style {
        width: 16px;
    }
</style>

<div class="cw-320">
    <DxTreeView Data="@Data">
        <DataMappings>
            <DxTreeViewDataMapping Text="SectionName"
                                   Key="Id" 
                                   ParentKey="SectionId"
                                   IconUrl="IconUrl"
                                   IconCssClass="IconCss" />
         </DataMappings>
    </DxTreeView>
</div>

@code {
    public class DataItem {
        public string SectionName { get; set; }
        public object Id { get; set; }
        public object SectionId { get; set; }
        public string IconUrl { get; set; }
        public string IconCss { get; set; }
    }

    List<DataItem> Data { get; set; }

    protected override void OnInitialized() {
        // Init your data structure here
    }
}

For other components or when you can assign an icon as a CSS class, use the IconCssClass property. The following code snippet assigns Open Iconic icons to Toolbar items:

<div class="card p-2">
    <DxToolbar>
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="https://demos.devexpress.com/blazor/Toolbar#DropDown" />
        <DxToolbarItem BeginGroup="true" IconCssClass="oi oi-align-left" />
        <DxToolbarItem IconCssClass="oi oi-align-center" />
        <DxToolbarItem IconCssClass="oi oi-align-right" />
        <DxToolbarItem IconCssClass="oi oi-cog" 
                       Alignment="ToolbarItemAlignment.Right" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="oi oi-info" />
    </DxToolbar>
</div>

DevExpress Icon Libraries

You can incorporate icons developed by DevExpress into your Blazor application. Refer to the sections below to investigate available options.

Blazor & XAF Icon Library

You can download custom icons used in DevExpress Blazor demos. Refer to the following GitHub folder: Images. These icons are also available as a part of our Figma UI Kit.

Note

You need a Figma account to view UI Kit files.

Follow the steps below to download icons from Figma and add them to an application:

1. Open the Icon Library file. Click the Open in Figma button.

   

   The Figma application opens in a new tab.

2. In the left side bar, choose the Blazor & XAF page that shows all icons used in Blazor components and XAF.

   

3. Select icons you want to download: hold Ctrl+Shift and click icons you need in the left side bar.

   

4. In the right side bar, expand the Export section. Set the icon format to SVG.

   

5. Click the Export button to download all selected icons as an archive.

6. Add the icons to the application’s solution folder.

7. Use the IconURL or IconCssClass property to assign an icon to a component as described in the section above: Add Custom Icons to DevExpress Blazor Components.

DevExtreme Icon Library

DevExtreme includes SVG and font icons for all DevExtreme themes. You can find all available icons in the following topic: DevExtreme Icons.

Add a link to one of the DevExtreme themes in one of the following files to access the icon set:

• Pages/_Layout.cshtml for Blazor Server applications created with a Microsoft template in .NET 6
• Pages/_Host.cshtml for Blazor Server applications created with a DevExpress Template in .NET 6 and .NET 7 or with a Microsoft template in .NET 7
• wwwroot/index.html for Blazor WebAssembly or Hybrid applications in .NET 6 and .NET 7
• Components/App.razor for Blazor Web applications in .NET 8 and .NET 9

Specify dx-icon-<icon-name> as the IconCssClass property value, where icon-name is the name of the icon you want to use.

The following code snippet assigns DevExtreme icons to Toolbar items:

Razor

<div class="card p-2 bg-transparent">
    <DxToolbar>
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="https://demos.devexpress.com/blazor/Toolbar#DropDown" />
        <DxToolbarItem BeginGroup="true" IconCssClass="dx-icon-alignleft" />
        <DxToolbarItem IconCssClass="dx-icon-aligncenter" />
        <DxToolbarItem IconCssClass="dx-icon-alignright" />
        <DxToolbarItem IconCssClass="dx-icon-preferences" 
                       Alignment="ToolbarItemAlignment.Right" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="dx-icon-info" />
    </DxToolbar>
</div>

Layout File

<head>
    <!-- ... -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/devextreme/24.1.7/css/dx.light.css" rel="stylesheet">
    <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
</head>