This is a beta release of the Quantum web libraries

Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.

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

<qtm-icon icon="account_circle"></qtm-icon>
<qtm-icon icon="account_circle" lib="material"></qtm-icon>

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

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

With Business Icons

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

<qtm-icon icon="aircraft" lib="business"></qtm-icon>

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);