Icons in the Header

You have a possibility to add an icon to the header's pane before the text label.

It can be done on the initialization stage or on-demand from any code line (say, you need to update icons depending on cell's content). All you need to do is to specify the icons path (the path to the folder where icons are located) and the icons you want to set for the cells.

// on init stage
var myAcc = new dhtmlXAccordion({
    parent: "accObj",                   // parent container
    icons_path: "../icons/",            // common icons path
    items: [
        {
            id: "a1",                   // item id
            text: "Header with icon",   // header's text
            icon: "flag_green.png"      // header's icon
    ]
});
 
// somewhere in the code
 
// firstly, you need to specify the path to icons,
// you need to set it once, if all the icons are located in the same folder
myAcc.setIconsPath("../icons/");
 
// then change the icons
myAcc.cells(id).setIcon("flag_green.png");
myAcc.cells(otherId).setIcon("flag_red.png");

In case you want to remove any item's icon - use the clearIcon() method:

myAcc.cells(id).clearIcon();

Related sample: Icons Manipulation

Font Awesome icons in Accordion

You can use Font Awesome icons in dhtmlxAccordion.

This possibility can be enabled in two ways:

1) during accordion initialization

myAcc = new dhtmlXAccordion({   
    iconset: "awesome"
});

2) after accordion initialization, using the setIconset method:

myAcc.setIconset("awesome");

Related sample: Font awesome

Follow the Font Awesome homepage to learn more about icons.