Customizing Icons

You have the possibility to customize the appearance of the TreeView icons in many ways. Besides the default icons, you can apply any custom icons, as well as use Font Awesome icons and set the desired color for them.

Using custom icons

Any TreeView item can have one of three icons, depending on its state:

folder opened,
folder closed,
file.

You can change these icons for any item in the following way:

1) From script

myTreeView.setItemIcons(id, {
    file:           "icon_file",    // css for the file
    folder_opened:  "icon_opened",  // css for the opened folder
    folder_closed:  "icon_closed"   // css for theclosed folder
});

2) From XML (while loading TreeView structure):

<?xml version="1.0" encoding="utf-8"?>
<tree>
    <item id="id" text="Text">
        <icons
            file="icon_file"
            folder_opened="icon_opened"
            folder_closed="icon_closed"/>
    </item>
</tree>

3) From JSON (while loading TreeView structure):

[
    {id: "id", text: "Text", icons: {
        file: "icon_file",
        folder_opened: "icon_opened",
        folder_closed: "icon_closed"
    }}
]

You should also define the necessary icons in the CSS like this:

.icon_file {
    background-image: url(path/to/icon_file.png);
}
.icon_opened {
    background-image: url(path/to/icon_opened.png);
}
.icon_closed {
    background-image: url(path/to/icon_closed.png);
}

Using Font Awesome

// during initialization
var myTreeView = new dhtmlXTreeView({
    iconset: "font_awesome"
});
 
// or after initialization
myTreeView.setIconset("font_awesome");

For the "font_awesome" iconset you can also change the color of icons:

myTreeView.setIconColor(id, "#abcdef");

To learn more about icons, follow Font Awesome homepage.