material-icon-theme
v5.16.0
Published
Material Design Icons for Visual Studio Code
Downloads
1,744
Maintainers
Readme
Material Icon Theme
Get the Material Design icons as NPM Module
File icons
Folder icons
Description
This npm module provides all Icons from the VS Code Material Icon Theme as npm module. The icons are available as SVG files and can be used in any web project.
Installation
Install the npm module:
npm install material-icon-theme
Usage
All the SVG files can be found in the "node_modules/material-icon-theme/icons" folder. To get to know the mapping between the file and folder names and the icons, the generateManifest
has to be used.
import { generateManifest } from 'material-icon-theme';
The generateManifest
function returns a JSON object with the mapping between the file and folder names and the icons. The JSON object can be used to display the icons in a web project.
This manifest follows the official VS Code extension API guidelines. More information how this manifest is structured and how it can be used can be found in the VS Code documentation.
The type definition for the manifest can be found in the material-icon-theme
module:
import { Manifest } from 'material-icon-theme';
Configure the icons
While generating the manifest, there can be some configuration options passed to the generateManifest
function. The configuration options are the same as in the VS Code Material Icon Theme extension. The configuration options can be found in the material-icon-theme
module:
import { type ManifestConfig, type IconAssociations, type IconPackValue, generateManifest } from 'material-icon-theme';
const config: ManifestConfig = {
activeIconPack: 'angular';
hidesExplorerArrows: true;
folders: {
theme: 'classic';
associations: {};
};
files: {
associations: {};
};
languages: {
associations: {};
};
};
const manifest = generateManifest(config);
Not all configuration options have to be passed. The generateManifest
function uses the default configuration options if they are not passed.
Icon packs
The Material Icon Theme provides different icon packs. The icon pack can be changed by setting the activeIconPack
in the configuration options. To get a list of all available icon packs, the getIconPacks
function can be used:
import { availableIconPacks, type IconPackValue } from 'material-icon-theme';
const iconPacks: Array<IconPackValue> = availableIconPacks;
console.log('Available icon packs:', iconPacks);