Home    Articles


How to easily change ui accordion icons


If you really want to change the default icons of ui accordion first you have to create your own css class with symbols you want, add some background image or something else, than add the classes in the code below.

But here is what you can do better with many more icons. This is what i've done:

I used IonIcons, you can download them from here: http://ionicons.com/

In the example below i've used in accordion 2 classes from ionicons ion-plus and ion-minus for active state and inactive state, but you can use whatever you want.

When you add the ionicons css file make sure you've added the fonts too. In these files, icons are stored as fonts.

$('#accordion').accordion({icons: { "header": "ion-plus", "activeHeader": "ion-minus" }});

That's all.