Skip to content
Dist for Material Design Icons React Component for JS/TypeScript
Branch: master
Clone or download
Latest commit 7d969c8 Jan 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
dist Build and Increment package version. Sep 6, 2018
src Update Icon.tsx Jan 11, 2019
tests v1.1.0 Oct 20, 2018
.babelrc Build component, rough draft. Aug 8, 2018
.gitignore Include VS Code configs. Aug 26, 2018
Icon.js
Icon.js.map v1.1.0 Oct 20, 2018
LICENSE
README.md
package-lock.json
package.json
tsconfig.json Build and Increment package version. Sep 6, 2018
tslint.json 19 Unit Tests! Aug 18, 2018
webpack.config.js

README.md

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

Usage

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}
        size={1}
        horizontal
        vertical
        rotate={90}
        color="red"/>
    );
  }
} 

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}
          color="red"/>
      </Stack>
    );
  }
} 

Props

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.

Styling

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;
  }
}

Development

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

Commands:

  • 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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.