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
There are different major versions of this package, each one for different Material-UI releases. Note that this project does not follow semantic versioning. If Material Design Icons removes or renames icons, it will still be a minor version bump.
Material-UI | mdi-material-ui | npm tag |
---|---|---|
^5.0.0 | latest | |
^4.0.0 | mui-v4 | |
^1.0.0, ^3.0.0 | mui-v3 | |
0.x | * | legacy |
* mdi-material-ui v4 (for Material-UI v0) is not updated anymore
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.
The Material Design Light icons are included in the /light
subdirectory.
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'
import { Camera, Settings } from 'mdi-material-ui/light'
<Coffee />
<Food />
<Camera />
<Settings />
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'
import Camera from 'mdi-material-ui/light/Camera'
import Settings from 'mdi-material-ui/light/Settings'
<Coffee />
<Food />
<Camera />
<Settings />
License
The scripts included in this repository are licensed under the MIT license. The icons are licensed under the MIT license (see Material Design Icons and the NOTICE file).