# EuiIconDirective

**Type:** directive

<p>Directive to add an icon to an eui-input-text element, allowing for click events too.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputText [euiIcon]=&quot;{ icon: &#39;eui-search&#39; }&quot; /&gt;</code></pre></div><h3>Clickable Icon</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputText
  [euiIcon]=&quot;{ icon: &#39;eui-close&#39;, clickable: true, ariaLabel: &#39;Clear search&#39; }&quot;
  (iconClick)=&quot;clearSearch()&quot; /&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Non-clickable icons should be decorative (<code>aria-hidden=&quot;true&quot;</code>)</li>
<li>Clickable icons must have <code>ariaLabel</code> for screen readers</li>
<li>Clickable icons are keyboard accessible (Tab + Enter)</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Icon is positioned at the end of the input</li>
<li>Automatically creates flex wrapper for layout</li>
<li>Supports custom icon colors via <code>colour</code> property</li>
</ul>


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

**Standalone:** false

## Inputs

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

## Outputs

- **iconClick**: `undefined` - 
