@ou-imdt/css/docs/utility/icon.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# icon

`.icon` is a simple class that allows the use of inline svgs as icons. It sets the icon to have a height of 1em and sets color, stroke and fill to `currentColor` resulting in the icon taking on color and text size of its immediate parent.

Some patterns for using inline svgs for icons are shown below based on the [WCAG design system](https://design-system.w3.org/styles/svg-icons.html "WCAG design system icon patterns") for svg icons.

## Decorative Icon

```html
<button>
    <svg aria-hidden="true" focusable="false" class="icon">
        ...
    </svg>
    Search
</button>
```

## Icon without visual text

```html
<button>
    <svg aria-hidden="true" focusable="false" class="icon">
        ...
    </svg>
    <span class="visually-hidden">Search</span>
</button>
```

## Inline SVG with simple meaning

```html
<button>
    <svg role="img" focusable="false" class="icon">
      <title>Search</title>
        ...
    </svg>
</button>
```