PrimeFaces icons

Question

I cannot find a way to pick the arrow icons like the ones present in the PickList component, in order to use them in other CommandButtons.

Well, I know that in order to use an icon in CommandButton, one has to follow these instructions:

<p:commandButton outcome="target" icon="star" title="With Icon"/>

having defined the star icon in a css file:

.star {
    background-image: url("images/star.png");
}

but I would prefer to use exactly the same arrows as for the PickList component.

Answer 1

Here a list of all available jQuery UI icons

jQueryUI Icons Cheatsheet N#1 (click on Toggle text to get all the names of the icons)

jQueryUI Icons Cheatsheet N#2

at least in <p:commandLink you can apply the icons using styleClass for example styleClass="ui-icon ui-icon-trash" (don't remember trying the same on p:commandButton - always preferred <p:commandLink)

B.T.W , <p:commandButton has no outcome attribute , <p:button has it...

---

In addition since PF v5.1.1 you can also use the icons of Font Awesome out of the box, by setting to true the primefaces.FONT_AWESOME context param , like this

<context-param>
   <param-name>primefaces.FONT_AWESOME</param-name>
   <param-value>true</param-value>
</context-param>

and using it like this:

<p:commandButton value="Download" icon="fa fa-download" type="button"/>

or

<p:menuitem value="Refresh" url="#" icon="fa fa-refresh"/>

See showcase: PrimeFaces - FontAwesome - Since v5.1.1