Material Design Icons in React

This is a short post to let you know of a little package I made: Material-JSX-Icons.

I love the icons Google has made for its Material Design initiative. They are super well designed, they are beautiful and they are very consistent.

They are my go-to option whe I need icons even whn I don’t like to use the rest of the Material Design UI elements and guidelines.

Google, very graciously, provides many ways to use their icons: you can download every icon in vector or image formats or use the icon font they not only provide but also host for you.

While the font method is the easiest to setup and use, consensus is that it may not be the best option for web. So I wanted to switch to SVG, but I dreaded the process of importing and styling individual SVGs files.

So I made a script that takes every SVG in the Material Design icon repository and transformed it from SVG to JSX using this amazing package: Svg-To-JSX. I found the result very useful!

So I also converted everything to ES5 using Babel and published it to NPM as Material-JSX-Icons

Now it’s possible to import and use individual icons as any other react component:

import React from 'react';
import PersonIcon from 'material-jsx-icons/person';
import DeleteIcon from 'material-jsx-icons/delete';

const App = () => (
  <div>
    <PersonIcon className={'icon'} />
    <DeleteIcon className={'icon'} />
  </div>
);

Don’t you think that’s cool? I do think that’s cool.

If you want to know more, check the README in Github.