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.

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

• via the icon property of controls

Use the name of the CSS class of an icon as a 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

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

• via the attachHTML() method

Pass an HTML element with the icon CSS class as a parameter:

const 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"></span>

• 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"
}

note

You can use the name of the CSS class of an icon from the preferable icon font in the same way, if necessary. For example, you can use the Font Awesome or Material Design icon packs.