How to include Material Icons in react-styleguidist
Question
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.
1 answers
solution1
0 2021-04-29 19:01:56
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.