Icon.mdx

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

import Header from '../shared/Header'; import { ExampleIcons, ExampleIncorrectIcons } from './ExampleIcons'; import Catalogue from './Catalogue'; import EvaluationForm from '../../stories/shared/EvaluationForm'

Quantum uses MUI, with beautifully crafted symbols for common actions and items.

Icons

It's structured with these ones:

• Importing
• Usage
• Catalog

Importing Icon

import Icon from '@catho/quantum/Icon';

Usage

You need to import the typography to include icon fonts.

<Icon name="info" size="small" />,
<Icon name="info" />,
<Icon name="info" size="large" />,
<Icon name="clear" />
<Icon name="search" />
<Icon name="error" />
<Icon name="visibility_off" />
<Icon name="visibility" />
<Icon name="check_box" />
<Icon name="emoji_people" skin={colors.primary['900']} />
<Icon name="emoji_people" skin={colors.secondary['900']} />
<Icon name="emoji_people" skin={colors.primary['700']} />
<Icon name="emoji_people" skin={colors.warning['900']} />
<Icon name="emoji_people" skin={colors.error['300']} />
<Icon name="emoji_people" skin={colors.error['300']} size="large" />

Unavailable Icons

If the string passed in the Icon is unavailable in the style guide catalog, it is going to display only the string wrapped in a span element and no icon will render.

<Icon name="bike" />
<Icon name="emoji_smile" skin={colors.primary['900']} />

Catalog

Available Icons