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 in the simulator to the right.

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
<div class="button" data-bind="dxButton: { text: 'Click me', icon: 'arrowdown' }"></div>

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', action: '#product-details', title: 'Add', icon: 'add' } "></div>
</div>

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 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-android .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/
  OVAAAARElEQVRYw+3WKQ4AIAADMPb/R4PHIDgTOr/ULUstZxPgfbAvBAgEAoFAIPAhcPebChAIHIKmDQgEAoFA4E/
  g7JcCrk4DW5xoAVzaKL0AAAAASUVORK5CYII=);
}
.dx-theme-ios .dx-icon-myicon
{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAQAAAACj/
  OVAAAAbElEQVRYw+3XMQoAIQxE0YzswffmsRK2kbFZg/itVNBHRHBUxt7WNnvxjI5WV7xmPGlZVaHSVJhuwhyNqisEBAQEBAQE/
  GSaWTaRe/AXM83Yvy7TxN8BVdxSQED+FoCAgICAgIA3ZBqO9FiwA9kyEOwz5x38AAAAAElFTkSuQmCC);
}

.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.

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.

CSS
.icon {
    display: inline-block;
    width: 28px;
    height:28px;
    background-size: 100%;
}
HTML
<span  class="dx-icon-home icon"></span><a href="#index" >Home</a>

Alternative to the Icon Library

As an alternative to the CSS-defined icons, you can add a folder with custom icons to your application and use them via the iconSrc configuration option exposed by the DevExtreme widgets and commands.

HTML
<div class="button" data-bind="dxButton: { text: 'Click me', iconScr: '/images/myicon.png' }"></div>