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.
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:
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.