DevExtreme Vue - Icon Library

DevExtreme comes with a built-in Icon Library. This library provides a large number of icons for all themes supplied with DevExtreme. You can look through this library below.

Use Icons for Widgets

Whatever DevExtreme widget you use, if it exposes the icon option, you can assign the name of a required icon from the library to it.

HTML
var buttonOptions = {
    text: 'Click me',
    icon: 'arrowdown'
 }

Use Icons for Commands

When using the DevExtreme framework for building an application, you can define actions in an abstract way - via commands. While specifying the action to be performed, you do not create a widget that will be displayed in a UI to provide the specified action. The widget representing a command will be then created automatically by the framework according to command mapping that you specify for the application. Although, you can set an icon for a command as well. For this purpose, the dxCommand component defining a command exposes the icon configuration option. This is the option that can be used to set an icon from the Icon Library.

HTML
<div data-options="dxView: { name: 'index', title: 'Home' }">
    <div data-bind="dxCommand: { id: 'myCommand', onExecute: '#product-details', title: 'Add', icon: 'add' } "></div>
</div>

Use Icons for Custom Elements

You can also apply icons from the library to custom elements in your application. For this purpose, apply the dx-icon-... CSS class to the required element.

NOTE
Since DevExtreme built-in icons are supplied as an icon font, you can specify their size and color using the font-size and color css attributes respectively.
CSS
HTML
.icon {
    font-size: 28px;
    color: #aaa;
}
<a href="#index"><span class="dx-icon-home icon"></span> Home</a>

Use External Icon Libraries

DevExtreme UI widgets support external icon libraries (Font Awesome, GLYPHICONS and ionicons).

To use an icon library, add a link to the appropriate style sheet.

HTML
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />

<!--GLYPHICONS-->
<link rel="stylesheet" type="text/css" href="/css/glyphicons.css" />

<!--ionicons-->
<link rel="stylesheet" type="text/css" href="/css/ionicons.min.css" />
NOTE
Referenced style sheet should contain a valid link to an icon font file.

To display an icon from an external library within a UI widget, pass the icon's css selector to the widget's or command's icon option, or to an item object's icon field if you need to display an icon for a collection widget item.

JavaScript
//Font Awesome
var buttonOptions = {
    ...
    icon: 'fa fa-home'
}

//GLYPHICONS
var buttonOptions = {
    ...
    icon: 'glyphicon glyphicon-home'
}

//ionicons
var buttonOptions = {
    ...
    icon: 'ion ion-home'
}
NOTE

For Font Awesome version 5, add the following CSS to ensure icons are rendered properly:

CSS
.dx-icon.fa {
    width: auto;
    height: auto;
}

Customize an Icon Appearance

Since DevExtreme built-in icons are shipped as a font, you can customize their color, size and weight using the same CSS rules you use to customize a text element appearance.

jQuery
HTML
JavaScript
CSS
<div id="remove-button"></div>
$("#remove-button").dxButton({
    icon: "remove",
    text: "Remove"
});
#remove-button .dx-icon{
    color: red;
    font-size: large;
    font-weight: bold;
}
AngularJS
HTML
CSS
<div id="remove-button" dx-button="{
    icon: 'remove',
    text: 'Remove'
}"></div>
#remove-button .dx-icon{
    color: red;
    font-size: large;
    font-weight: bold;
}
Knockout
HTML
CSS
<div id="remove-button" data-bind="dxButton: {
    icon: 'remove',
    text: 'Remove'
}"></div>
#remove-button .dx-icon{
    color: red;
    font-size: large;
    font-weight: bold;
}
NOTE
These rules are predefined for separate icons and icons used within widgets. Thus, to apply custom rules to an icon, ensure that custom rules have higher priority than predefined rules.

Extend Icon Library

To extend the built-in Icon Library, add the dx-icon-... CSS class to your CSS file that is used in your application. Set the icon name as the third part of the class name. For instance, the following class will be used to display the myicon icon.

CSS
.dx-icon-myicon
{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/
    OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/
    g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=) 0 0 no-repeat;
}

When an icon is set in this way, it can be applied to DevExtreme widgets and commands in the same way as a built-in icon. This means that you can use the icon widget option, setting the name of your icon to it.

HTML
<div class="button" data-bind="dxButton: { text: 'Click me', icon: 'myicon' }"></div>
NOTE
We recommend that you use the Base64 type for icons when using them for DevExtreme widgets in this way to reduce the number of requests and the amount of data transferred. You can use any "image to data URI" converter to generate a base64 URL.

You can set a specific icon variant for different themes. In this instance, add the dx-icon-... class under the dx-theme-... CSS class where the latter defines one of the themes supplied with DevExtreme.

CSS
.dx-theme-android5 .dx-icon-myicon
{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/
    OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/
    g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=);
}
.dx-theme-ios7 .dx-icon-myicon
{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMCAQAAABtnpmgAAAAZUlE
    QVRo3u3SsQkAIAwEQDOw0ziwFhZiY6OixX0VCDwXSNT0ZwIMDAwMDAwMDAwMDAzsJKyMsVfFvM9gYGBgYGBgYCvG1h0
    5wL6BeX4wMDAwMDCw27BbAQMDAwMDAwMDAwMDe5IGFJGKAcyLcs4AAAAASUVORK5CYII=);
}    

In addition, consider providing a specific icon variant for different states of a widget (widget item). The following example shows how to provide an icon for a selected tab.

CSS
.dx-theme-ios7 .dx-tab-selected .dx-icon-myicon
{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/OVAAAAQElEQVRYw+3XsQ0AIAwDMPL/
    0TD0BEQ74OyRl0pVsldvAgQCgcAxsGoBAoFA4Pfg3ecK0JUCgUAg0CAFAoHAdzlK5VcBsySXawAAAABJRU5ErkJggg==);
}

To see more examples of DevExtreme-specific CSS classes, research the style sheets that come with the product.

Requirements to icon images

To make UI widgets display your icons correctly, the icon images should satisfy the following requirements.

  • format
    PNG-24 with alpha channel

  • resolution
    56x56 px, except for icons displayed on dxNavBar items in the iOs platform, which should be 76x76 px with 10 px transparent padding on each side. Thus, the image size without padding is 56x56 px.

Alternative to the Icon Library

As an alternative to the CSS-defined icons, you can add a folder with custom icons to your application. The icon option accepts a path to the icon image as well as an icon name.

HTML
var buttonOptions = {
    text: 'Click me', 
    icon: '/images/myicon.png' 
}