I would like to set icons in PrimeFaces tree nodes. My icons are configured in the project CMS.

Unfortunately, the Resource Demo doesn't help me.

<p:tree id="treeSingle" value="#{treeBean.root}" var="node" selectionMode="single"
  <p:treeNode icon="">
    <h:outputText value="#{node.name}" />

In <p:treenode> I need to set the icon attribute with a syntax that will retrieve icons from the CMS.

asked 15.11.2013 at 12:05

A1234's gravatar image

accept rate: 33%

edited 15.11.2013 at 12:06

Basically the icon attribute points to a css-class. So if you want to use custom icons you need to create a custom css-class. For example:


.customIcon {
   background: transparent url("#{resource['ivy-cms:Images/customIconImage']}") no-repeat top !important;

Your code:

[...]<p:treeNode icon="customIcon">[...]

The CSS-class will now reference a file that is within the CMS-Folder Images/ and point to an image with name customIconImage (doesn't matter what format). You can also set the width and height within the CSS-class to control the size of the icon via CSS, although this is not recommended because this takes up bandwith when the original sized icon is loaded and afterwards resized.

Hope this helps.


answered 18.11.2013 at 09:21

Nikel%20Weis's gravatar image

Nikel Weis
accept rate: 57%

edited 18.11.2013 at 10:01


Thanks Nikel,

You saved my day! To be precise, I created a CSS file "style.css" in "<project>/webContent", with the CSS-class content you mentioned.

Then I added <h:outputstylesheet name="style.css"/> right after the <h:body> tag.

And finally, I referenced the icon resource in my <p:treenode> tag. That works.

(18.11.2013 at 10:01) A1234 A1234's gravatar image

Better practice would be to place it within the <head>-Tag. But that should be done quickly. Glad to hear, that it helped.

(18.11.2013 at 16:22) Nikel Weis Nikel%20Weis's gravatar image

Good point! Fixed it.

I was inspired by the MethodCallbackDialog in the HtmlDialogDemos project.

(18.11.2013 at 16:33) A1234 A1234's gravatar image
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "Title")
  • image?![alt text](/path/img.jpg "Title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 15.11.2013 at 12:05

Seen: 8,686 times

Last updated: 18.11.2013 at 16:33