Built-In Icon Library
DevExtreme comes with an icon library that provides font icons for all DevExtreme themes. You can use the icons in widgets and in other page elements as they are or customize them.
Available icons are presented below:
Icons in Widgets
Icons can be used in those widgets that have an icon option. For instance, the Button widget has this option on the first level of the configuration object. Icons in the following code samples are taken from the built-in icon library.
jQuery
$(function() {
$("#saveButton").dxButton({
icon: "save",
text: "Save"
});
});Angular
<dx-button
icon="save"
text="Save">
</dx-button>
import { DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxButtonModule
],
// ...
})Vue
<template>
<dx-button
icon="save"
text="Save" />
</template>
<script>
import DxButton from 'devextreme-vue/button';
export default {
components: {
DxButton
}
}
</script>React
import React from 'react';
import { Button } from 'devextreme-react/button';
class App extends React.Component {
render() {
return (
<Button
icon="save"
text="Save"
/>
);
}
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().Button()
.Icon("save")
.Text("Save")
)Many default templates provide the icon option as well, the ContextMenu widget's default item template being an example:
jQuery
$(function() {
$("#contextMenuContainer").dxContextMenu({
// ...
dataSource: [
{ text: "Zoom In", icon: "plus" },
{ text: "Share", icon: "message" },
{ text: "Download", icon: "download" }
]
});
});Angular
<dx-context-menu ... >
<dxi-item text="Zoom In" icon="plus"></dxi-item>
<dxi-item text="Share" icon="message"></dxi-item>
<dxi-item text="Download" icon="download"></dxi-item>
</dx-context-menu>
import { DxContextMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxContextMenuModule
],
// ...
})Vue
<template>
<dx-context-menu ... >
<dx-item text="Zoom In" icon="plus" />
<dx-item text="Share" icon="message" />
<dx-item text="Download" icon="download" />
</dx-context-menu>
</template>
<script>
import { DxContextMenu, DxItem } from 'devextreme-vue/context-menu';
export default {
components: {
DxContextMenu,
DxItem
}
}
</script>React
import React from 'react';
import { ContextMenu, Item } from 'devextreme-react/context-menu';
class App extends React.Component {
render() {
return (
<ContextMenu ... >
<Item text="Zoom In" icon="plus" />
<Item text="Share" icon="message" />
<Item text="Download" icon="download" />
</ContextMenu>
);
}
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().ContextMenu()
.Items(i => {
i.Add().Text("Zoom In").Icon("plus");
i.Add().Text("Share").Icon("message");
i.Add().Text("Download").Icon("download");
})
)To find a list of widgets that support icons, search for "icon" in the left-hand menu.
Icons in Other HTML Elements
If an HTML element should display a DevExtreme icon, add a dx-icon-IconName class to it. We recommend using inline HTML elements (<i> or <span>).
<i class="dx-icon-email"></i>
You can find icon names in the Built-In Icon Library article.
Customize Icons
Since DevExtreme icons are shipped as an icon font, they can be customized with the same CSS properties that you would use to customize textual content: color, font-size, font-weight, text-align, etc. This is true for icons used in widgets...
jQuery
<div id="saveButton"></div>
$(function() {
$("#saveButton").dxButton({
icon: "save",
text: "Save"
});
});
#saveButton .dx-icon {
font-size: 24px;
color: blue;
}Angular
<dx-button
id="saveButton"
icon="save"
text="Save">
</dx-button>
import { DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxButtonModule
],
// ...
})
::ng-deep #saveButton .dx-icon {
font-size: 24px;
color: blue;
}Vue
<template>
<dx-button
id="saveButton"
icon="save"
text="Save" />
</template>
<script>
import DxButton from 'devextreme-vue/button';
export default {
components: {
DxButton
}
}
</script>
<style>
#saveButton .dx-icon {
font-size: 24px;
color: blue;
}
</style>React
import React from 'react';
import { Button } from 'devextreme-react/button';
class App extends React.Component {
render() {
return (
<Button
id="saveButton"
icon="save"
text="Save"
/>
);
}
}
export default App;
#saveButton .dx-icon {
font-size: 24px;
color: blue;
}ASP.NET MVC Controls
@(Html.DevExtreme().Button()
.ID("saveButton")
.Icon("save")
.Text("Save")
)
#saveButton .dx-icon {
font-size: 24px;
color: blue;
}... and for icons used in any other HTML elements:
<i class="dx-icon-email dx-icon-custom-style"></i>
.dx-icon-custom-style {
font-size: 24px;
color: blue;
}dx-icon is a CSS class added to icon elements when DevExtreme widgets render them into the DOM. You cannot use another name for it. However, it is not true for icons in other HTML elements. You can use any name for the class in this case, as demonstrated in the previous example.
Custom Images as Icons
The widget's icon option accepts URLs, so you can assign the image's URL to it. However, it is better to encode the image in the Base64 type instead to reduce the amount of transferred data. Search for an image to Base64 converter on the web.
Although Base64 code can be assigned directly to the icon option, we recommend placing it in the CSS because of its length. Add the following CSS rule to your stylesheet:
.dx-icon-customicon { // in Angular apps, add ::ng-deep before
background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
background-repeat: no-repeat;
background-position: 0px 0px;
}customicon here is the icon's name that you should assign to the widget's icon option.
In addition, you can provide a specific icon variant for different states of a widget element. In the following code, a special icon is provided for selected tabs:
.dx-tab-selected .dx-icon-customicon {
background-image: url(data:image/png;base64,... LONG BASE64 CODE GOES HERE ...);
background-repeat: no-repeat;
background-position: 0px 0px;
}Classes like dx-tab-selected from the previous example are not documented. Inspect CSS rules to find out which classes are added to the widget element you are customizing.
External Icon Libraries
Icons in widgets are inserted into the DOM as <i> elements. When you set a widget's icon option, its value is used to form the class attribute of the <i> element. For instance, the code below ...
icon: "home"
... renders into the DOM as follows:
<i class="dx-icon dx-icon-home"></i>
This allows DevExtreme widgets to support icons from external icon libraries, provided that they too should be specified in the class attribute.
Font Awesome, Glyphicons, and Ionicons are examples of such libraries. Follow the installation tutorial for the library you want to use and set the icon option as follows:
jQuery
$(function() {
$("#homeButton").dxButton({
icon: "fas fa-home" // Font Awesome 5
icon: "fa fa-home" // Font Awesome 4
icon: "glyphicon glyphicon-home" // Glyphicons
icon: "ion ion-home" // Ionicons
});
});Angular
<dx-button ...
icon="fas fa-home" <!-- Font Awesome 5 -->
icon="fa fa-home" <!-- Font Awesome 4 -->
icon="glyphicon glyphicon-home" <!-- Glyphicons -->
icon="ion ion-home"> <!-- Ionicons -->
</dx-button>Vue
<template>
<dx-button ...
icon="fas fa-home" <!-- Font Awesome 5 -->
icon="fa fa-home" <!-- Font Awesome 4 -->
icon="glyphicon glyphicon-home" <!-- Glyphicons -->
icon="ion ion-home" /> <!-- Ionicons -->
</template>
<script>
import DxButton from 'devextreme-vue/button';
export default {
components: {
DxButton
}
}
</script>React
import React from 'react';
import { Button } from 'devextreme-react/button';
class App extends React.Component {
render() {
return (
<Button
icon="fas fa-home" // Font Awesome 5
icon="fa fa-home" // Font Awesome 4
icon="glyphicon glyphicon-home" // Glyphicons
icon="ion ion-home" // Ionicons
/>
);
}
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().Button()
.Icon("fas fa-home") // Font Awesome 5
.Icon("fa fa-home") // Font Awesome 4
.Icon("glyphicon glyphicon-home") // Glyphicons
.Icon("ion ion-home") // Ionicons
)If you have technical questions, please create a support ticket in the DevExpress Support Center.