import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as IconStories from './Icon.docs.stories'
# Icon API Specification
Updated September 4, 2024
### Set up
Add the following (CDN for the variable icon font) to your Storybook `preview-head.html` and to the `` of your apps.
```html
```
## Overview
Icon extends [Material Symbols](https://fonts.google.com/icons), utilising the CDN.
## API
### Name
See [Material Symbols](https://fonts.google.com/icons) for all valid options.
### Filled
### Mirror in RTL
The `shouldMirrorInRTL` prop mirrors the Icon in `dir="rtl"`.
Use this for directional icons based on your usage context (eg. forwards in LTR will point right, whilst in RTL will point left).
Read more about bidirectionality from [Material Design](https://m2.material.io/design/usability/bidirectionality.html#mirroring-elements).
### Accessibility
#### Meaningful icon
Icons without accompanying text need to convey their intent to the screen reader.
Add `alt` text for these use cases.
#### Presentational icon
For icons which are purely presentational, add `isPresentational` to hide it from the screen reader.
### Customisation
#### Color
The Icon component inherits the color from its parent by default. You may also change the color using `className`.
#### Size
There are two ways to change the size of the icon:
1. (Recommended) Change the value of the `--icon-size` CSS variable (eg. in Tailwind - `[--icon-size:48]`).
This option will also scale the [optical size](https://m3.material.io/styles/icons/applying-icons#b41cbc01-9b49-4a44-a525-d153d1ea1425) of the icon.
Note that the value must be a whole number value without units.
2. Override the `font-size` CSS attribute (eg. in Tailwind - `text-[1em]`).
This option will not scale the optical size of the icon for you, so you will need to combine it with also
overriding the `--icon-optical-size` CSS variable (eg. in Tailwind - `[--icon-optical-size:48]`).
## Default icon set
Whilst you have access to all Material Symbols, the following icons match the default set we have in Figma.
Tip: Click on the icon you want for a quick copy!