Skip to main content
Version: Next

Icon

Molecule uses the @vscode/codicons font icon by default, and also provides the Icon component of React.

Basic use​

tip

All code demos in this part are based on the molecule-demo project in Quick Start.

Introduce Icon component

import molecule from '@dtinsight/molecule';
<molecule.component.Icon type="check" />;

or

import { Icon } from '@dtinsight/molecule/esm/components';
<Icon type="check" />;

type is the icon name, refer to this preview address for the complete name list.

Use Icon className​

If you don’t want to use the built-in React Icon component, you can also use the codicon icon by using the className of the Icon font, for example:

<span className="codicon codicon-arrow-both"></span>
tip

For the complete online preview of @vscode/codicons icons, click here!