M3 Adding Custom Icons

Custom icons are SVGs added as React components in the src/components/icons directory.

We wrap the custom SVG in MUI's SvgIcon component, with the props to our custom component spread to the SvgIcon component. This allows MUI's theming to easily apply to our custom icons.

import React from 'react';
import SvgIcon from '@material-ui/core/SvgIcon';

export default function MyCustomIcon(props) {
  return (
    <SvgIcon {...props}>
      <svg xmlns="http://www.w3.org/2000/svg" ...>
        <path ... />
      </svg>
    </SvgIcon>
  );
}