yihao-g / mdi-es

Material Design Icons exported as ES modules

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 microsoft/TypeScript#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

mdi-es's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @mdi/svg to v6.9.96
• Update dependency typescript to v4.9.5
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency @mdi/svg to v7
• Update dependency rimraf to v6
• Update dependency typescript to v5
• Update fregante/setup-git-user action to v2
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/npm-publish.yml

• actions/checkout v2
• fregante/setup-git-user v1
• actions/setup-node v2

npm

package.json

• @mdi/svg 6.5.95
• @mdi/util 0.3.2
• rimraf 3.0.2
• typescript 4.5.4

---

• Check this box to trigger a request for Renovate to run again on this repository