Nutella Peanut-Butter Marshmallow


1.1.0 • Public • Published

React - Material Design Icons

Material Design Icons can be used in React with a custom component or with the one provided in this module.

View the Demo

npm install @mdi/react --save-dev


The example below uses the @mdi/js package which contains all the MDI icon's path data.

import React, { Component } from 'react';
import Icon from '@mdi/react';
import { mdiAccount } from '@mdi/js';
class App extends Component {
  render() {
    return (
      <Icon path={mdiAccount}

Stack Usage

To layer <Icons/> nest them inside of the <Stack/> component.

import React, { Component } from 'react';
import Icon, { Stack } from '@mdi/react';
import { mdiAccount, mdiBlockHelper } from '@mdi/js';
class App extends Component {
  render() {
    return (
      <Stack color="#444">
        <Icon path={mdiAccount}/>
        <Icon path={mdiBlockHelper}


Icon <Icon/>

Prop PropTypes Default Details
path string required SVG path data. Usually from @mdi/js
size number, string null {size * 1.5}rem, 1em, 48px
horizontal bool false Flip Horizontal
vertical bool false Flip Vertical
rotate number 0 degrees 0 to 360
color string null rgb() / rgba() / #000
spin bool, number false true = 2s, -2 counterclockwise, {spin}s

Note: Additional props will be applied to the <svg> element.

Stack <Stack/>

All props below will override the nested <Icon/>'s default prop values.

Prop PropTypes Default Details
size number, string, null null {size * 1.5}rem
horizontal bool, null null Flip Horizontal
vertical bool, null null Flip Vertical
rotate number, null null degrees 0 to 360
color string, null null rgb() / rgba() / #000
spin bool, number, null null true = 2s, -2 counterclockwise, {spin}s

Note: Additional props on <Stack> will apply to the <svg> element. Only in a <Stack> will addional props to the <Icon> component apply to the nested <path> elements.


Applying a className attribute is usually the easiest solution. The example below demonstrates using SCSS to style the icons.

In most cases it may be a good idea to set a base size. Assuming a 16px base font-size in most themes applying 1.5rem will make the icon a 24px.

svg {
  width: 1.5rem;

For more specific styling apply classes. To make selection of layers easier use the nth-child selector.

// For <Icon className="custom-class" />
svg.custom-class {
  path {
    fill: blue;
// For <Stack className="custom-class">
svg.custom-class {
  // First layer (behind)
  path:nth-child(1) {
    fill: blue;
  // Second layer (infront)
  path:nth-child(2) {
    fill: red;


To develop clone the repo and run npm install.

  • src/Icon.tsx - Icon Component
    • tests/Icon.spec.tsx - Unit tests
  • src/Stack.tsx - Stack Component
    • tests/Stack.spec.tsx - Unit tests


  • npm run start - Watch for file changes
  • npm run build - Build Icon.js
  • npm run test - Run unit tests

Note: This project is setup to use the Mocha Sidebar extension which makes it easier to view the tests.

Related Packages

NPM @MDI Organization


npm i @mdi/react

Downloadsweekly downloads









last publish


  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability