Material Icon Font with Gatsby

If you’re using Gatsby and want to use material icons, there are a couple of options. If you would like to use them as a font, here is what you can do.

Start by adding the Gatsby plugin for Google fonts to your project with yarn or npm .

yarn add gatsby-plugin-google-fonts

Next, edit your gatsby-config.js to include the new plugin. You may have other plugins there already, just add it to the end of the plugins array. In the example below, we added it just after the helmet plugin. You’ll notice you can add other Google fonts here too. I have added Roboto with several different font weights.

Now you can add material icons wherever you need by simply typing the name of the icon inside an element and adding ‘Material Icons’ font-family to that elements class. Note, the _ is important as it is used for spaces (e.g. check_circle).