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" />

    <InputIcon class="pi pi-spin pi-spinner"> </InputIcon>
    <InputText v-model="value2" />

Custom content inside an InputIcon is defined as children.

<IconField iconPosition="left">
        <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)" />
    <InputText v-model="value" placeholder="Search" />

Screen Reader

IconField and InputIcon does not require any roles and attributes.

Keyboard Support

Components does not include any interactive elements.