Icons

• Oct 30, 2020

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 Microsoft Templates (Visual Studio).

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:

<div class="card-header 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="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>

Run Demo: Toolbar - Overview