Icon

Icons play a vital role in improving the readability of components by creating visual indicators and guiding users to better understand actions when used correctly.

Library

The Quantum icon component offers compatibility with both the Material icons and the Quantum Business Icons.

To use the icon component, make sure to import the necessary icon libraries

With Material Icons

By default, the component is set up to work with Material icons or lib="material".

account_circleaccount_circle

<Icon icon="account_circle"></Icon>
<Icon icon="account_circle" lib="material"></Icon>

With Business Icons

<Icon icon="aircraft" lib="business"></Icon>

Variants

The icon component offers two variants: filled and outlined. By default, the component is set to filled. Note that variants are only available with Material icons.

account_circleaccount_circle

<Icon icon="account_circle" variant="filled"></Icon>
<Icon icon="account_circle" variant="outlined"></Icon>

Sizes

The icon component is available in six sizes: xsmall, small, medium, large, xlarge, and xxlarge. By default, the component is set to medium size.

account_circle

xsmall

account_circle

small

account_circle

medium

account_circle

large

account_circle

xlarge

account_circle

xxlarge

<Icon icon="account_circle" size="xsmall"></Icon>
<Icon icon="account_circle" size="small"></Icon>
<Icon icon="account_circle" size="medium"></Icon>
<Icon icon="account_circle" size="large"></Icon>
<Icon icon="account_circle" size="xlarge"></Icon>
<Icon icon="account_circle" size="xxlarge"></Icon>

Custom Icons

The Icon component also supports custom icons through the children prop. This is useful when you need to use your own SVG icons or images.

<Icon>
  <img src="/path/to/icon.svg" alt="custom icon" />
</Icon>

When using custom icons:

• The lib and variant props will be ignored
• The icon prop will be ignored

Event handling

Not applicable. The Icon component is a visual element and does not support any event handlers directly. If you need to make an icon interactive, wrap it in a button or another interactive component.

// Example of making an icon interactive by wrapping it in a button
<Button onClickEvent={() => console.log('Icon clicked')}>
  <Icon icon="settings" />
</Button>

API

QtmIcon

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
icon	string		icon name
lib	"business" | "material"		Choose between the Material icon or Quantum business icon library
size	"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxlarge"		The size of the icon
variant	"filled" | "outlined" | "round" | "sharp" | "two-tone"	'filled'	The variant of the icon used for the material icon library

<Icon icon="user" lib="business" size="small" />
<Icon icon="user" lib="business" size="medium" />
<Icon icon="user" lib="business" size="large" />