PrimeFaces CommandButton: Dynamically enable/disable icon

Question

PrimeFaces's CommandButton allows to specify an icon:

<p:commandButton value="Press me" icon="redBall" ... />

However, I need to enable/disable the icon depending on a JSF managed bean property.

I tried

<p:commandButton value="Press me" icon="#{bean.iconClass}" ... />

This works for choosing different icons, but does not allow to disable the icon altogether (i.e. get the same rendering like without the icon= attribute). I can return an empty string in getIconClass(), but PrimeFaces will still render the extra <span> for the icon inside the button, and CSS styling causes this span to be visible with a default icon.

Is there a way to tell PrimeFaces "I want no icon at all" (other than taking out the icon= attribute altogether)?

Answer 1

I can think of 2 ways without duplicating the button.

1. Supply the icon as <f:attribute> which is conditionally added by <c:if>.

   <p:commandButton ...>
       <c:if test="#{not empty bean.icon}"><f:attribute name="icon" value="#{bean.icon}" /></c:if>
   </p:commandButton>
   

   ---

2. Set a style class which hides the icon altogether and supply it conditionally.

   .hideicon .ui-icon { display: none; }
   .hideicon .ui-button-text { padding-left: 1em; }
   

   with

   <p:commandButton ... icon="#{bean.icon}" styleClass="#{empty bean.icon ? 'hideicon' : ''}" />
   

Answer 2

A lame workaround would be to have 2 commandbuttons. One with icon definition and one without. And then render the correct one.