1

I'm trying to use Google Material Icons in my react-styleguidist documentation. In my styleguide.config.js file, I've tried

module.exports = {
    template: './template.html'
}

and then added <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> to the <head> tag of the template.html file but react-styleguidist doesn't recognize this format anymore, it seems.

I've tried to use a template and theme as follows:

template: {
    head: {
      links: [
         {
           rel: 'stylesheet',
           href: 'https://fonts.googleapis.com/css2?family=Material+Icons'
         }
       ]
    }
},
theme: {
   fontFamily: {
       base: "Material+Icons"
    }
}

This just displays the icon name in words rather than the actual icon. I think this method only works for actual fonts like Roboto etc. Any help would be appreciated.

jaimish11
  • 536
  • 4
  • 15

1 Answers1

0

I've found a solution that works for me. May not be the ideal way to do it, but it works.

In my styleguide.config.js I've added:

require: [
    path.join(__dirname, '/fonts/material-icons.css'),

]

Inside /fonts/material-icons.css, I've pasted the css from here -
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

And that's it. Now I can use something like <span class="material-cions-rounded">group</span> in any of my code files.

jaimish11
  • 536
  • 4
  • 15