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 the available default icons are presented in the related sample.
The icons can be placed on the page in the ways given below:
Use the name of the 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"
}
var list = new dhx.List("list", {
css: "dhx_widget--bordered",
template: (item) => "<i class=’dxi dxi-icon-’ + item.icon></i>" });
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>");
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>
{
id: "sidebar",
html: "<i class=’dxi dxi-icon-name’></i>", gravity: false,
css: "dhx_layout-cell--border_right",
width: "200px"
}
You can use the name of an icon from the used icon font in the same way, if necessary. For example, you can use the Font Awesome or Material Design icon packs.