IconField wraps an input and an icon.
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/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.
<IconField iconPosition="left">
<InputIcon class="pi pi-search"> </InputIcon>
<InputText v-model="value1" placeholder="Search" />
</IconField>
<IconField>
<InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
<InputText v-model="value2" />
</IconField>
Custom content inside an InputIcon is defined as children.
<IconField iconPosition="left">
<InputIcon>
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--primary-color)" />
<path d="..." fill="var(--text-color)" />
</svg>
</InputIcon>
<InputText v-model="value" placeholder="Search" />
</IconField>
IconField and InputIcon does not require any roles and attributes.
Components does not include any interactive elements.