I wanted to add some Material Design Icons to a Docusaurus documentation page that I'm working on, but couldn't find a good tutorial on how to do exactly that. I'm relatively new to the React.js world, so I had to futz for a bit, but eventually got it figured out. I figured I'd share, in case anyone else wants to add material icons to their Docusaurus site:
Install @material-ui/core
npm install @material-ui/core
Within your config file docusaurus.config.js, add an import of the material icons font family. See docs
stylesheets: [
"https://fonts.googleapis.com/icon?family=Material+Icons",
],
Within a .mdx file (blog or docs file), import the appropriate React component. Throw this just under your metadata block:
import Icon from "@material-ui/core/Icon";
Finally, within your .mdx page you can pepper various icons:
<Icon>face</Icon>