# Icon

Source: https://iriscss.com/documentation/components/icon/

A square box for an inline SVG or an icon font. It keeps its space while the icon loads.

Iris CSS ships no icon set. Wrap any SVG or icon font glyph in `.icon`. An SVG without `fill` takes the text color.

```html
<p>
  <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon color-amber-500"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
</p>
```

## Sizes

```html
<p>
  <span class="icon small"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon medium"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
  <span class="icon large"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
</p>
```

## Icon and text

`.icon-text` puts an icon and its label side by side. On a `div` it spans the full width.

```html
<p>
  <span class="icon-text">
    <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
    <span>Starred</span>
  </span>
</p>
<button class="accent">
  <span class="icon-text">
    <span class="icon"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0l2.5 5 5.5.8-4 3.9.9 5.5L8 12.6 3.1 15.2 4 9.7 0 5.8 5.5 5z"/></svg></span>
    <span>Add to favorites</span>
  </span>
</button>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-icon-size` | `1.5rem` |
| `--i-icon-size-small` | `1rem` |
| `--i-icon-size-medium` | `2rem` |
| `--i-icon-size-large` | `3rem` |
| `--i-icon-color-text` | `inherit` |
| `--i-icon-text-gap` | `0.25em` |