Icons

You can assign icons to different DevExpress Blazor components. For example, assign icons to series legend items in a Chart, icons to nodes in a Tree View, icons to items in a Toolbar, etc.

Icons are available in pre-defined sets such as Iconic or Bootstrap-recommended libraries. DevExpress Blazor components also support custom icon libraries.

NOTE

Microsoft's Blazor App template includes the Iconic library. To learn more about this template, see Configure a Blazor Application.

To assign an icon to a component or its elements, use the IconCssClass property. The code below demonstrates how to assign Iconic icons to Toolbar items:

<DxToolbar>
    <DxToolbarItem Text="Item" />
    <DxToolbarItem Text="Link to the next demo" 
                   NavigateUrl="https://demos.devexpress.com/blazor/Toolbar#DropDownItems" />
    <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>

Toolbar Overview

NOTE

Online Demo: Toolbar - Overview

See Also