Material Design Icons - ES Module Build

A custom ES modularised build of Material Design Icons. This module contains all the SVG path data for all icons. Each icon is contained in an individual module.

npm install mdi-es

⚠ Note: This documentation assumes your Node.js supports custom package exports

This package uses "exports" in package.json, which remaps dist/*.js folder to /. Therefore, when importing like import mdiAccount from 'mdi-es/mdiAccount', Node actual imports from mdi-es/dist/mdiAccount.js.

If the Node you are using doesn't have custom package exports enabled, please import like import mdiAccount from 'mdi-es/dist/mdiAccount.js'.

TypeScript

Your TypeScript may complain TS2307: Cannot find module 'mdi-es/mdiAccount' or its corresponding type declarations.. This is due to the known issue of https://github.com/microsoft/TypeScript/issues/33079 and is expected to be implemented in 4.3.

Usage

Import

You can load icons by importing either through the main file (index.js) or each individual module.

Through the main file

Other icons will be tree-shaken if used with a JavaScript module bundler, such as webpack or rollup.js.

import { mdiAccount } from 'mdi-es'

console.log(mdiAccount) // "M...Z"

Import individual module

This is useful if you are not using a JavaScript module bundler or using dynamic import, because not all icons are imported.

import mdiAccount from 'mdi-es/mdiAccount'

console.log(mdiAccount) // "M...Z"

Show icon path

The imported value is a string of SVG path. It can be displayed by passing the value to the d attribute of <path> element in an <svg> element.

<svg viewBox="0 0 24 24">
    <path d="mdiAccount string goes here" />
</svg>

Here is an example of Vue component <template>:

<template>
    <svg viewBox="0 0 24 24" class="fill-current" :style="{ width: sizeString, height: sizeString }">
        <path :d="iconPath" />
    </svg>
</template>

Related Packages

NPM @MDI Organization

• React: MaterialDesign-React
• SVG: MaterialDesign-SVG
• Webfont: MaterialDesign-Webfont
• Font-Build: MaterialDesign-Font-Build
• Desktop Font: MaterialDesign-Font

Learn More

• MaterialDesignIcons.com
• https://github.com/Templarian/MaterialDesign