DevExtreme jQuery/JS - Icon Library
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.
<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.
.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.
<!--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' }
For Font Awesome version 5, add the following CSS to ensure icons are rendered properly:
.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
<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
<div id="remove-button" dx-button="{ icon: 'remove', text: 'Remove' }"></div>
#remove-button .dx-icon{ color: red; font-size: large; font-weight: bold; }
Knockout
<div id="remove-button" data-bind="dxButton: { icon: 'remove', text: 'Remove' }"></div>
#remove-button .dx-icon{ color: red; font-size: large; font-weight: bold; }
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.
.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 channelresolution
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.