Home » React JS » Using Material UI icons in React

Using Material UI icons in React

Following on from my post about changing the Material UI Appbar background colour, here is a tutorial on using Material UI Icons in a React app. Before we dive into the detail I’m presuming that you’ve created a React app already, so once you are ready to start focusing on using icons in your Material UI React app you’ll need to:

  1. Install Material UI for React
  2. Install Material UI icons (material-ui/icons)

Read on for details of each of these steps.

Install Material UI for React

For this tutorial I’ll be using Mui, a component library for React using Material UI.

Use the following command to install the latest package to your React app, I’ll be using MUI v5.2.7 which is the newest version at the time of writing this post:

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

As per the documentation, Mui was designed with Roboto font in mind, but it isn’t installed automatically, so we need to do that now. There are several different ways of doing this but I’ll import it from a CDN for this tutorial. Add this to your index.html file above the Title tag:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Install a Material UI Icons package

I’ve said ‘a material UI icons package’ because there isn’t just 1, there are 3 different ways of using icons with Material UI. You can use any icon font, or SVG icon with material UI, but I’m going to explain how to use React Material icons library. It’s a library of 1300 icons made specifically to use with Material UI.

In order to use this package you need to install it from here. Again, follow their instructions for the most up to date command, but you’ll need to use a command like this to install the package :

// with npm
npm install @mui/icons-material

// with yarn
yarn add @mui/icons-material

Viewing and using the icons

The whole library of icons is here to view, so once you’ve found the icon(s) you want to use, make a note of the name. You can search for icons, so let’s say you’re looking for an icon to do with a beach, you’d search here:

Search material ui icons

You can import each icon individually by using it’s name, and in VS Code, as you start typing the name within the curly brackets, you’ll see an autocomplete list come up of all of the available icons. So importing the BathroomICon icon would look like this :

import BathroomIcon from "@mui/icons-material/Bathroom";

Once you’ve imported the icon or icons that you need you’re ready to add them to the correct position in your page. To show the BathroomIcon in the page you’d simply reference it like this:

<BathroomIcon />
 

That’s the simplest example of how to use an icon in React using Material UI. It’s likely though that you’ll want to change the icon somehow. In Material UI each icon also has a ‘theme’, so most of the icons have variations as follows:

  • Filled (default)
  • Outlined
  • Rounded
  • Two-tone
  • Sharp

To import the icon component with a theme other than the default, do this:

import BathroomIconOutlined from "@mui/icons-material/BathroomOutlined";
import BathroomTwoToneIcon from "@mui/icons-material/BathroomTwoTone";

//use them like this
<BathroomIconOutlined />
<BathroomTwoToneIcon />

Change the React Material UI Icon colour

The simplest way to change the colour of the icon is to pass a direct style colour property:

//using a hex value
<BathroomIconOutlined style={{ color: "#ffee66" }} />

//using a standard css colour
<BathroomTwoToneIcon style={{ color: "blue" }} />

//import a material ui colour, and use that
import { purple } from "@mui/material/colors";
<BathroomIcon style={{ color: purple[500] }} />

Change the React Material UI Icon size

The simplest way to change the size of a Material UI icon is to use the fontSize prop, directly or in a style directive:

//using the fontSIze prop - small / medium / large
<BathroomTwoToneIcon fontSize="large" />

 //using the fontSize property in a style directive
<BathroomIcon style={{ fontSize: "60px" }} />

Change the hover colour of a Material UI icon

In order to change the colour of the icon when you hover over it is done using css in the sx property. In this example we’ll use the BatterySaverTwoTone icon, so set the markup like this, including a colour for the normal state, and then a hover state color defined using the “&:hover” selector :

 <BatterySaverTwoToneIcon
  sx={{
      color: green[200],
        fontSize: "120px",
          "&:hover": { color: green[500] },
  }}
  />
  

In this example the normal colour is green[200] and the hiver colour is green[500], where green is a colour imported from Material UI like this :

import { green } from "@mui/material/colors";

You should now find the color changes when you hover over the icon! I’ve included the code that will give you the icons shown in this image, giving examples of different sizes and colours, and an example of how to change the hover color of the icon.

Changing the colour and size of Material UI icons in React

And here is the code for all of those icons:

import "./App.css";
import { Typography } from "@mui/material";
import BathroomIcon from "@mui/icons-material/Bathroom";
import BathroomIconOutlined from "@mui/icons-material/BathroomOutlined";
import BathroomTwoToneIcon from "@mui/icons-material/BathroomTwoTone";
import BatterySaverTwoToneIcon from "@mui/icons-material/BatterySaverTwoTone";
import { purple } from "@mui/material/colors";
import { green } from "@mui/material/colors";

function App() {
  //const { classes } = props;
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Learn to use <code>Material UI</code> icons.
        </p>
      </header>
      <Typography variant="h5" gutterBottom>
        Basic icon use
      </Typography>
      <BathroomIcon />
      <BathroomIconOutlined />
      <BathroomTwoToneIcon />
      <Typography variant="h5" gutterBottom>
        Change Material UI icon size
      </Typography>
      <BathroomIcon fontSize="small" />
      <BathroomIconOutlined fontSize="medium" />
      <BathroomTwoToneIcon fontSize="large" />
      <BathroomIcon style={{ fontSize: "60px" }} />
      <BathroomIconOutlined style={{ fontSize: "120px" }} />
      <BathroomTwoToneIcon style={{ fontSize: "160px" }} />
      <Typography variant="h5" gutterBottom>
        Change Material UI icon colour
      </Typography>
      <BathroomIcon style={{ color: purple[500], fontSize: "120px" }} />
      <BathroomIconOutlined style={{ color: "#ffee66", fontSize: "120px" }} />
      <BathroomTwoToneIcon style={{ color: "blue", fontSize: "120px" }} />

      <Typography variant="h5" gutterBottom>
        Change Material UI icon colour on hover
      </Typography>
      <BatterySaverTwoToneIcon
        sx={{
          color: green[200],
          fontSize: "120px",
          "&:hover": { color: green[500] },
        }}
      />
    </div>
  );
}

export default App;

And the App.css file is this:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
  margin-bottom: 20px;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}