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.

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.

With Material Icons

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>

With Business Icons

xsmall

small

medium

large

xlarge

xxlarge

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

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