Today we released the first version of the @mdi/react NPM package. Hoping this helps with adoption of Material Design Icons in exisiting ReactJS projects.

npm install @mdi/react

MaterialDesign-React

import Icon from '@mdi/react'
import { mdiAccount, mdiLoading } from '@mdi/js'

const Example = (props) => (
  <div>
    <Icon path={mdiAccount}/>
    <Icon path={mdiLoading} spin/>
  </div>
)

Props

path: string - SVG path data. Usually from @mdi/js
size: number, string (1) - {size * 1.5}rem
horizontal: bool (false) - Flip Horizontal
vertical: bool (false) - Flip Vertical
rotate: number (0) - degrees 0 to 360
color: string (#000) - Ex: rgb() / rgba() / #000
spin: bool, number (false) - Ex: true = 2s, {spin}s

@mdi/js ?

The @mdi/js package contains all the icons after each release as both CommonJS for Node and a module for use with import/export. Ideal for TypeScript and ES6 developers.

What about x Framework

The team is working on VueJS and Angular 6 components that will offer similar functionality. In the future we'll hopefully get to other more niche frameworks.