Material Design Icons for Material-UI

This module provides Material-UI <SvgIcon /> components for all Material Design Icons. This is pretty handy if you use React and Material-UI to build a web app and run out of icons.

While this module contains wrappers for all icons, alias names are not included. For example, the plus icon is aliased as add, but only the plus icon is exported.

Installation

npm install mdi-material-ui --save

Usage

Every icon is exported with its original name in PascalCase. So coffee becomes Coffee, cloud-print-outline is exported as CloudPrintOutline and so on.

With tree-shaking

If your environment supports tree-shaking and you are sure that it works fine in your setup, you can simply import the icons as follows:

import { Coffee, Food } from 'mdi-material-ui'

<Coffee />
<Food />

Without tree-shaking

If your environment doesn't support tree-shaking, you should only import the icons that you actually need in order to ensure that you don't end up bundling all icons.

import Coffee from 'mdi-material-ui/Coffee'
import Food from 'mdi-material-ui/Food'

<Coffee />
<Food />

If you think that this is far too verbose (I agree!), consider using babel-plugin-direct-import. Install it and adjust your .babelrc by adding the following snippet to the plugins section:

{
  // ...
  plugins: [
    // ...
    ["direct-import", ["mdi-material-ui"]]
  ]
}

License