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".

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

The Quantum icon component supports five styles of Material Icon: outlined, round, sharp, two-tone and filled, by providing variant property.

<QtmIcon icon="account_circle" variant="filled"></QtmIcon>
<QtmIcon icon="account_circle" variant="outlined"></QtmIcon>
<QtmIcon icon="account_circle" variant="sharp"></QtmIcon>
<QtmIcon icon="account_circle" variant="two-tone"></QtmIcon>
<QtmIcon icon="account_circle" variant="round"></QtmIcon>

With Business Icons

You want to use Quantum Business Icons by setting the "lib" property to "business".

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

Sizes

You can change size of icon component by setting size property to xsmall, small, medium, large, xlarge or xxlarge. By default, Quantum icon size is medium

• Class
  Properties
• qtm-icon-xsmall

  --icon-size-value: var(--spacing-s);

  font-size: var(--icon-size-value);

  width: var(--icon-size-value);

  height: var(--icon-size-value);

• qtm-icon-small

  --icon-size-value: var(--spacing-m);

  font-size: var(--icon-size-value);

  width: var(--icon-size-value);

  height: var(--icon-size-value);

• qtm-icon-medium

  --icon-size-value: 1.25rem;

  font-size: var(--icon-size-value);

  width: var(--icon-size-value);

  height: var(--icon-size-value);

• qtm-icon-large

  --icon-size-value: var(--spacing-l);

  font-size: var(--icon-size-value);

  width: var(--icon-size-value);

  height: var(--icon-size-value);

• qtm-icon-xlarge

  --icon-size-value: var(--spacing-xl);

  font-size: var(--icon-size-value);

  width: var(--icon-size-value);

  height: var(--icon-size-value);

• qtm-icon-xxlarge

  --icon-size-value: var(--spacing-3xl);

  font-size: var(--icon-size-value);

  width: var(--icon-size-value);

  height: var(--icon-size-value);

With Material Icons

xsmall

small

medium

large

xlarge

xxlarge

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

With Business Icons

xsmall

small

medium

large

xlarge

xxlarge

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

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