Embedding over 2000 icons with a Webfont is a very bad idea when you are not using all of them (i.e. 99.9% of the time). Please use our SVG-based Material Design Icons components instead.

Sorry for the long repo name, but it pretty much nails it. This tiny module provides Material-UI <FontIcon /> elements for all Material Design 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 at the moment. For example, the plus icon is aliased as add, but only the plus icon is exported.

npm install materialdesign-webfont-material-ui --save

To use the icons, you need to include the webfont in your HTML files.

<link href="//cdn.materialdesignicons.com/1.9.32/css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />

Then you can import and use the icons. Every icon is exported with its original name in PascalCase, plus Icon. So coffee becomes CoffeeIcon, cloud-print-outline is exported CloudPrintOutlineIcon and so on.

import { CoffeeIcon } from 'materialdesign-webfont-material-ui'

// ...

render() {
  return (
    <div>
      Enjoy your coffee! <CoffeeIcon />
    </div>
  )
}

The scripts included in this repository are licensed under the WTFPL. For the license of the icons, see Material Design Icons.