# mdi-material-ui > Material-UI SvgIcon components for Material Design Icons. Latest version **8.0.0** (published 2026-04-09) · MIT license · 0 weekly downloads ## Install ```sh npm install mdi-material-ui pnpm add mdi-material-ui yarn add mdi-material-ui bun add mdi-material-ui ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; large bundle. ## Facts | | | |---|---| | Version | 8.0.0 | | Published | 2026-04-09 | | First published | 2017-07-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 10.8 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Wertarbyte | | Maintainers | evidence, saschb2b, lemaik, redbeard0091 | | Keywords | material, ui, icons, webfont, font, react | ## Links - npm: https://www.npmjs.com/package/mdi-material-ui - Repository: https://github.com/TeamWertarbyte/mdi-material-ui - Homepage: https://github.com/TeamWertarbyte/mdi-material-ui#readme - Issues: https://github.com/TeamWertarbyte/mdi-material-ui/issues - npm.io page: https://npm.io/package/mdi-material-ui ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads ## Recent versions - 8.0.0 (latest) — 2026-04-09 - 7.9.4 (mui-v7) — 2025-03-28 - 6.30.0 (mui-v4) — 2023-12-31 - 5.42.0 (mui-v3) — 2023-12-31 - 4.33.2 (legacy) — 2021-07-13 - 7.0.0 (next) — 2021-02-06 - 7.9.3 — 2024-12-11 - 7.9.2 — 2024-09-06 - 7.9.1 — 2024-05-07 - 7.9.0 — 2024-05-07 - 7.8.0 — 2023-12-31 - 7.7.0 — 2023-04-02 - 6.29.0 — 2023-04-02 - 5.41.0 — 2023-04-02 - 7.6.0 — 2022-10-30 - … 130 more at https://npm.io/package/mdi-material-ui/versions ## README # Material Design Icons for Material-UI [![Material Design Icons version](https://img.shields.io/badge/mdi-v7.4.47-blue.svg)](https://github.com/Templarian/MaterialDesign) [![Material Design Icons version](https://img.shields.io/badge/mdi--light-v0.2.63-blue.svg)](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 | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- | | ^9.0.0 | [![npm](https://img.shields.io/npm/v/mdi-material-ui.svg)](https://www.npmjs.com/package/mdi-material-ui) | latest | | ^5.0.0, ^6.0.0, ^7.0.0 | [![npm](https://img.shields.io/npm/v/mdi-material-ui.svg)](https://www.npmjs.com/package/mdi-material-ui/v/mui-v7) | mui-v7 | | ^4.0.0 | [![npm](https://img.shields.io/npm/v/mdi-material-ui/mui-v4.svg)](https://www.npmjs.com/package/mdi-material-ui/v/mui-v4) | mui-v4 | | ^1.0.0, ^3.0.0 | [![npm](https://img.shields.io/npm/v/mdi-material-ui/mui-v3.svg)](https://www.npmjs.com/package/mdi-material-ui/v/mui-v3) | mui-v3 | | 0.x | [![npm](https://img.shields.io/npm/v/mdi-material-ui/legacy.svg?color=yellow)](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 --- _Source: https://npm.io/package/mdi-material-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._