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?

Can you please, at least give feedback on answers. Even if they did not solve your problem, it might help (others) in fine tuning the answer and possibly the question. See https://stackoverflow.com/help/someone-answers — Jasper de Vries, Feb 20 '20 at 12:46

score 3 · Answer 1 · edited Feb 19 '20 at 09:18

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)

Jasper de Vries · Answer 2 · 2020-02-20T09:36:03.780

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.

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

2 Answers2