# EuiIconDirective

**Type:** directive



Directive to add an icon to an eui-input-text element, allowing for click events too.

### Basic Usage
```html
<input euiInputText [euiIcon]="{ icon: 'eui-search' }" />
```

### Clickable Icon
```html
<input euiInputText
  [euiIcon]="{ icon: 'eui-close', clickable: true, ariaLabel: 'Clear search' }"
  (iconClick)="clearSearch()" />
```

### Accessibility
- Non-clickable icons should be decorative (`aria-hidden="true"`)
- Clickable icons must have `ariaLabel` for screen readers
- Clickable icons are keyboard accessible (Tab + Enter)

### Notes
- Icon is positioned at the end of the input
- Automatically creates flex wrapper for layout
- Supports custom icon colors via `colour` property


**Selector:** `input[euiInputText][euiIcon]`

## Inputs
- **euiIcon**: `InputIconMetadata` - 
- **readonly**: `undefined` - 

## Outputs
- **iconClick**: `undefined` -