PrimeFaces CommandButton: dynamically enable / disable icon

Question

PrimeFaces CommandButton allows you to specify an icon:

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

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

I tried

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

This works to select different icons, but it does not completely disable the icon (i.e. get the same rendering as without the icon= attribute). I can return an empty string to getIconClass() , but PrimeFaces will still display additional <span> for the icon inside the button, and the CSS style makes this range visible with the default icon.

Is there a way to tell PrimeFaces “I don't want any icon at all” (except for the icon= attribute at all)?

Answer 1

I can think of 2 ways without duplicating a button.

• Put 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> 

  ---

• Set a style class that completely hides the icon and supplies it conditionally.

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

  from

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

Answer 2

A workaround would be to have 2 command buttons. One with and without a badge definition. Then do the right one.