IconField

Basic

Place the icon before or after the input. Padding adapts automatically.

Custom icons and both sides

Use your own SVGs or icon font. Icons remain decorative; labels and help text describe the field.

Float label

The label stays clear of the icon and moves above the field when focused or filled.

Sizes

Set avSize on the input. Icon dimensions and spacing follow the input size.

Forms and states

The native input keeps its form binding, validation and disabled state.

Right-to-left

Leading and trailing positions follow the text direction.

Usage and API

import { AvIconField, AvInputIcon, AvInput } from 'avero-ui';

<label for="search">Search</label>
<av-icon-field>
  <av-input-icon>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2"><circle cx="10" cy="10" r="6" />
      <path d="m15 15 5 5" /></svg>
  </av-input-icon>
  <input avInput id="search" [(ngModel)]="query" />
</av-icon-field>

<!-- Put av-input-icon after the input for a trailing icon.
     Use both positions for two icons. -->
<av-float-label label="Search">
  <av-icon-field>
    <av-input-icon>⌕</av-input-icon>
    <input avInput placeholder=" " [(ngModel)]="query" />
  </av-icon-field>
</av-float-label>

Import AvIconField, AvInputIcon and AvInput. Put one native input and one or two icon components directly inside av-icon-field. With iconPosition="auto" (default), an icon before the input is leading and an icon after it is trailing. For a single icon, left or right overrides placement; these map to logical start/end in RTL.

Icons are hidden from assistive technology and ignore pointer events. Do not put buttons or links inside av-input-icon. Provide a visible label or aria-label for the input and separate accessible text for meaningful status. The wrapper adds no keyboard behavior and does not replace the native form control.

Customize --av-icon-field-color, --av-icon-field-size, --av-icon-field-inset and --av-icon-field-gap on the wrapper. Use AvFloatLabel with placeholder=" " for a floating label.

Reference: PrimeNG IconField.