Icons
- 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.
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 example below shows how to assign an icon to a toolbar item and specify its size:
<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>
For other components or when you can assign an icon as a CSS class, use the IconCssClass
property. The code below demonstrates how to assign 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
Icons used within DevExpress Blazor components are available as a part of our Figma UI Kit. Follow the steps below to download these icons and add them to an application:
Open the Icon Library file. Click the Open in Figma button.
The Figma application opens in a new tab.
In the left side bar, choose the Blazor & XAF page that shows all icons used in Blazor components and XAF.
Select icons you want to download: hold Ctrl and click icons you need in the left side bar.
In the right side bar, expand the Export section. Set the icon format to SVG.
Click the Export button to download all selected icons as an archive.
Add the icons to the application’s solution folder.
Use the
IconURL
orIconCssClass
property to assign an icon to a component as described in the section above: Add Custom Icons to DevExpress Blazor Components.
You can also download custom icons used in DevExpress Blazor demos. Refer to the following GitHub folder: SVG Icons.
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
Specify dx-icon-<icon-name>
as the IconCssClass
property value, where icon-name
is the name of the icon you want to use.
The example below shows how to assign DevExtreme icons to Toolbar items:
<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>