https://github.com/teamwertarbyte/mdi-material-ui
Material-UI SvgIcon components for Material Design Icons.
https://github.com/teamwertarbyte/mdi-material-ui
icons material-ui mdi react svg-icons
Last synced: 6 months ago
JSON representation
Material-UI SvgIcon components for Material Design Icons.
- Host: GitHub
- URL: https://github.com/teamwertarbyte/mdi-material-ui
- Owner: TeamWertarbyte
- License: mit
- Created: 2017-04-22T18:53:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T11:07:00.000Z (over 1 year ago)
- Last Synced: 2024-05-17T20:45:22.951Z (over 1 year ago)
- Topics: icons, material-ui, mdi, react, svg-icons
- Language: JavaScript
- Homepage:
- Size: 5.89 MB
- Stars: 328
- Watchers: 4
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Material Design Icons for Material-UI
[](https://github.com/Templarian/MaterialDesign)
[](https://github.com/Templarian/MaterialDesignLight)
This module provides [Material-UI][material-ui] `` components for all
[Material Design Icons][md-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.
[materialdesign-webfont-material-ui]: https://github.com/TeamWertarbyte/materialdesign-webfont-material-ui
[material-ui]: http://www.material-ui.com/
[md-icons]: https://materialdesignicons.com/
## Installation
```shell
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, ^6.0.0, ^7.0.0 | [](https://www.npmjs.com/package/mdi-material-ui) | latest |
| ^4.0.0 | [](https://www.npmjs.com/package/mdi-material-ui/v/mui-v4) | mui-v4 |
| ^1.0.0, ^3.0.0 | [](https://www.npmjs.com/package/mdi-material-ui/v/mui-v3) | mui-v3 |
| 0.x | [](https://www.npmjs.com/package/mdi-material-ui/v/legacy) \* | 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:
```js
import { Coffee, Food } from 'mdi-material-ui'
import { Camera, Settings } from 'mdi-material-ui/light'
```
### 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.
```js
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'
```
## 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](https://github.com/Templarian/MaterialDesign-SVG) and the [NOTICE][] file).
[notice]: https://github.com/TeamWertarbyte/mdi-material-ui/blob/master/NOTICE