Default Icons

DHTMLX Suite library provides a set of default icons that you can use to decorate your application. To use any of these icons just click on the desired one to copy it and then paste it into the intended part of the code line.

All available default icons are presented in the related sample.
Related sample:  Base icons - DHTMLX Helpers

The icons can be placed on the page in the ways given below:

• via the icon property of controls

Use the name of the icon as the value of the icon property in the object with parameters of a control.

{
    type:"button",
    id: "add",
    icon: "dxi dxi-plus",     value: "Add"
}

• through the template configuration property of the component:

var list = new dhx.List("list", {
    css: "dhx_widget--bordered",  
    template: (item) => "<i class=’dxi dxi-icon-’ + item.icon></i>"  });

• via the attachHTML() method

Pass an HTML element with an icon class as a parameter.

var popup = new dhx.Popup({
    css: "dhx_widget--border-shadow"
});
 
popup.attachHTML("<i class=’dxi dxi-icon-name’></i>");

• by adding an HTML element with an icon class in any place of your app

You can use any inline HTML elements like < i > or < span >.

<i class="dxi dxi-icon-name"></i>
 
<span class="dxi dxi-icon-name"></i>

• via the HTML configuration property of the component

{
    id: "sidebar",
    html: "<i class=’dxi dxi-icon-name’></i>",     gravity: false,
    css: "dhx_layout-cell--border_right",
    width: "200px"
}

Back to top