### File

`packages/components/eui-input-text/eui-icon.directive.ts`

### Description

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

### Basic Usage

Example :

    <input euiInputText [euiIcon]="{ icon: 'eui-search' }" />

### Clickable Icon

Example :

    <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

### Implements

`OnDestroy`

### Metadata

Selector | `input[euiInputText][euiIcon]`

### Index

###### Inputs

- euiIcon
- readonly

###### Outputs

- iconClick

###### HostBindings

- attr.readonly

###### Accessors

- cssClasses

### Constructor

`constructor()`

### Inputs

euiIcon
Type : `InputIconMetadata`

readonly
Default value : `null, { transform: booleanAttribute }`

### Outputs

iconClick

### HostBindings

attr.readonly
Type : `string | null`

### Accessors

cssClasses
get `cssClasses()`
set `cssClasses(value: string)`

Parameters :

Name | Type | Optional
value | `string` | No

Returns : `void`

# results matching ""

# No results matching ""