Add icon (e.g. material design or Prime Icons) to a p:inputText

Question

I want to add an icon for an input text element, in a JavaEE project:

<h:panelGroup styleClass="md-inputfield">
    <p:inputText id="name"
                 value="#{createCustomerView.customer.name}" required="true"
                 label="Nome" requiredMessage="inserisci il nome">
        <f:validateLength minimum="2" />
    </p:inputText>
    <p:outputLabel for="name" value="Nome" />
    <p:message for="name" display="icon" />
</h:panelGroup>

How Can add an icon, like a person icon?

Answer 1

You can make use of Primefaces input group. refer https://www.primefaces.org/showcase/ui/input/inputGroup.xhtml

<div class="ui-inputgroup">
  <span class="ui-inputgroup-addon"><i class="pi pi-user"></i></span>
  <p:inputText placeholder="Username" />      
</div>

But don't forget you do need to add the PrimeIcons by adding this to your h:head

(like mentioned in https://www.primefaces.org/showcase/ui/misc/primeicons.xhtml)

Answer 2

Please note that the input group is not a component, but a set of CSS rules. Those rules where added in PrimeFaces 7. If you are using an older version of PrimeFaces, it's a good idea to upgrade for many other reasons, but if you really cannot, you can always add the CSS rules to your own project as custom styles.

Alternatively, you should remember that JSF / PrimeFaces will simply render HTML. So you can always resort to a solution using CSS, as can be found at: Put icon inside input element in a form.

See also:

• How do I override default PrimeFaces CSS with custom styles?