⚠️ This project is deprecated

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.

---

Material Design Webfont for Material-UI

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.

Installation

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

Usage

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

License

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