DevExtreme Vue - Icon Library

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.

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

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.

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

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.

.icon {
    font-size: 28px;
    color: #aaa;
}

<a href="#index"><span class="dx-icon-home icon"></span> Home</a>

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.

<!--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" />

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.

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

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

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

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

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.

<div id="remove-button"></div>

$("#remove-button").dxButton({
    icon: "remove",
    text: "Remove"
});

#remove-button .dx-icon{
    color: red;
    font-size: large;
    font-weight: bold;
}

<div id="remove-button" dx-button="{
    icon: 'remove',
    text: 'Remove'
}"></div>

#remove-button .dx-icon{
    color: red;
    font-size: large;
    font-weight: bold;
}

<div id="remove-button" data-bind="dxButton: {
    icon: 'remove',
    text: 'Remove'
}"></div>

#remove-button .dx-icon{
    color: red;
    font-size: large;
    font-weight: bold;
}

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.

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

<div class="button" data-bind="dxButton: { text: 'Click me', icon: 'myicon' }"></div>

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.

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

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

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.

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