Thursday, January 24, 2013

How to change icon for Primefaces tree

This post shows how to change the default icon for Primefaces tree.

From the Primefaces demo, we can see that there are attributes for us to change the opened and closed icon - expandedIcon, collapsedIcon, and also icon.
icon for Primefaces tree

These attributes are not referring to image files. Instead, there are css classes.
Thus, we have to define css classes to overwrite the existing.

1. declare below css classes in the application css file.
Change icon for Primefaces tree - styleClass
    i.  #{resource[....]} refers to the application resource folder.
    ii. ['images:...'] refers to the images folder in resource
    iii.[...:folder_opened.png] refers to the image file name.

2. use the newly declared css classes in <p:tree />
How to change icon for Primefaces tree



  1. It worked.. its applicaple to all elements that has icon property. Thanks a lot!

  2. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. Residential Tree Services

  3. Those considering a profession in tree surgery, should at the very least, love the outdoors, be in good physical condition, and have a strong interest in the conservation and care of trees. Tree surgeons are often called out in poor weather conditions and required to travel long distances, so a commitment to the trade is essential. tree surgeon

  4. Looks like the writer has put a lot of hard work into this.
    Hobby Plants



Related Posts Plugin for WordPress, Blogger...