IconField wraps an input and an icon.
import { IconFieldModule } from 'primeng/iconfield';
import { InputIconModule } from 'primeng/inputicon';
A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property that the default value is right and also left option is available.
<p-iconfield iconPosition="left">
<p-inputicon styleClass="pi pi-search" />
<input type="text" pInputText placeholder="Search" />
</p-iconfield>
<p-iconfield iconPosition="right">
<p-inputicon styleClass="pi pi-spinner pi-spin" />
<input type="text" pInputText />
</p-iconfield>
An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
<p-iconfield iconPosition="left">
<p-inputicon>
<svg width="20" height="20" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." />
<mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
<path d="..." fill="var(--primary-color-text)" />
</mask>
<g mask="url(#mask0_1_36)">
<path fill-rule="evenodd" clip-rule="evenodd" d="..." fill="var(--primary-color)" />
</g>
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="..."
fill="var(--primary-color-text)"
/>
<path d="..." />
<path d="..." />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="..."
fill="var(--primary-color-text)"
/>
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
<path d="..." fill="var(--primary-color-text)" />
</svg>
</p-inputicon>
<input type="text" pInputText placeholder="Search" />
</p-iconfield>
IconField and InputIcon does not require any roles and attributes.
Components does not include any interactive elements.