import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Icon/Icon" />

# Icon

Icons are small images that represent concepts or capabilities that often provide information or lead users to other pages within the application. 

Icon should be:
- Centrally aligned when used in a group with an appropriate amount of space between them.
- Paired with text or a tooltip when its intention is not immediately evident. 
- Relatively sized when used with text.

Icon shouldn’t:
- Include letters in the icon design.
- Be randomly scaled to fit the layout.

Regarding sizing, this component uses the **1em x 1em** container by default and maintains the aspect ratios. You can:

- Use the theme to color the icon.
  
- Use font icon text from the [Material Symbol Library](https://marella.github.io/material-symbols/demo/)

It is built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the available [props from Theme-UI](https://theme-ui.com/sx-prop).

### Required Components

This component can be used independently and does not require additional components.

### Accessibility

#### Labelling

The Icon component accepts the title prop:
`title={{ id: 'unique id', name: 'short description of the icon'}}`.
The `name` will be passed inside title attribute of span element.
The `id` is optional. If not specified, it will be generated automatically.
This is needed to make font icon accessible.

#### Screen Readers

If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.