M3 Adding Custom Icons - ProjectMirador/mirador GitHub Wiki
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>
);
}