Importing Material UI icons

Again…I keep forgetting this…

Option 1: Importing directly from MUI library

yarn add @material-ui/icons

Go here: https://material-ui.com/components/material-icons/

Click or search for icons

Import like so on a React file:

import ErrorIcon from '@material-ui/icons/Error';

If you want to customize it further…

import ErrorIcon from '@material-ui/icons/Error'
import { withStyles } from '@material-ui/core/styles'
export const StyledErrorIcon = withStyles({
  root: {
   fontSize: 15,
   marginRight: 5,
   '&:hover': {
     backgroundColor: 'red'
   }
   '@media (max-width: 350px)' : {
     fontSize: 13,   
   
   },
  },
})(ErrorIcon)

Option 2: Importing SVGs directly from Material

Go here: https://material.io/resources/icons/?style=baseline

Download an SVG from there.

Open the svg.

Make a file path somewhere…do something like this…

import React from 'react'
const signUpPath = (
  <>
   <path d='M0 0h24v24H0z' fill='none' />
   <path d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4     4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-  2.66-5.33-4-8-4z' />
  </>
)
export default signUpPath