IconField wraps an input and an icon.

import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';

IconField wraps the InputIcon and the input field component.

    <InputIcon class="pi pi-search" />
    <InputText v-model="value1" placeholder="Search" />

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

Custom content inside an InputIcon is defined as children.

        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="..." fill="var(--p-primary-color)" />
            <path d="..." fill="var(--p-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.