PrimeFaces CommandButton: Dynamically enable/disable icon

jsf, primefaces

Solution

I can think of 2 ways without duplicating the button.

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>

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' : ''}" />

Problem

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)?

Original source