Skip to main content

Adding Material UI Icons to Docusaurus

ยท One min read

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

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: