The Essential Guide to Using MUI Icons in React (With Video!)

Material-UI makes importing and using icons simple. We can quickly use MUI Icons in a React project, even if we don’t use any other MUI components.

In this tutorial I will show a basic example of using a Material-UI icon in a React project. Then I will show how to use icons inside of other MUI components with React. I will also customize the icon color and layout. Here’s an example of customized icons:

MUI Icons in React Example
MUI Icons in React Example

Here is a YouTube version of this post, or watch below:

The Essential MUI Icon Tutorial (Ex...
The Essential MUI Icon Tutorial (Exact Steps!)

What Are MUI Icons?

Material-UI provides three options for using icons:

  • MUI Icons exported as components
  • An SVG wrapper component for wrapping SVG paths
  • An Icon component for wrapping font icons

The first option requires the least effort and relies only on the MUI library. The second option is useful if you create your own SVG icon. The third option is best if you like to use font awesome.

Here’s what a Material-UI Icon looks like as a component in your JSX code:

<ShoppingCartIcon />

The Simplest Example of an MUI Icon in React

We’ll wrap an icon in a div render it. This needs only one import in our React file, but it requires several MUI dependencies. Run the following (if you are using npm):

npm install @emotion/react, @emotion/styled, @mui/icons-material, @mui/material

Importing an MUI Icon

MUI icons import like any other component, except that they exist in the @mui/icons-material space instead of @mui/material.

import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

Using an MUI Icon

We’ll add the ShoppingCartIcon inside a div and give it a custom color:

<div><ShoppingCartIcon sx={{ color: 'blue' }}></ShoppingCartIcon></div>
MUI Shopping Cart Icon
MUI Shopping Cart Icon

The sx prop is the simplest form of styling in MUI. It has similarities to both inline styling and class-based styling. Most importantly, it uses no boilerplate code.

As simple as that, we’ve used MUI icons in a React project.

How to Use MUI Icons: A Detailed Tutorial

In this next example I will use MUI Icons in a larger Material-UI example. We’ll use an IconButton (made for rendering clickable icons) and show an Alert component with it’s own custom icon.

MUI Icon in MUI Alert
MUI Icon in MUI Alert

Using MUI Icons in an MUI React Project

Here are the steps for using Icons in MUI:

  • Import the needed icons and components
  • Wrap the Icons in the appropriate component or component prop
  • Add any desired styling to the icon using the sx prop

In the code below, I imported the ShoppingCartIcon and ThumbUpIcon. The ShoppingCartIcon was then wrapped in an IconButton as its child.

The ThumbUpIcon was passed to the Alert component’s icon prop. This automatically renders it in front of the Alert text.

Finally, I added a click handler to the IconButton, Alert, and Dialog component. These set the open state value to true or false depending, which controls whether the Dialog component is open. The Dialog wraps the Alert.

import * as React from "react";
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import IconButton from "@mui/material/IconButton";
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import Dialog from "@mui/material/Dialog";
import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";

export default function MUIIconTutorial() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <IconButton onClick={() => { setOpen(!open) }}><ShoppingCartIcon sx={{ color: 'blue' }}></ShoppingCartIcon></IconButton>
      <Dialog open={open} onClose={() => setOpen(!open)}>
        <Alert icon={<ThumbUpIcon/>} onClose={() => {setOpen(!open)}}>
          <AlertTitle>Success!</AlertTitle>
          Added to cart.
        </Alert>
      </Dialog>
    </>
  );
}

MUI Icon Layout

If you need to control the layout direction of several icons, use the MUI Stack component. It has a direction prop that sets the flex-direction of the Stack contents.

<Stack direction="column" spacing={2}><MenuIcon sx={{color: 'primary.main'}}/><MenuIcon sx={{color: 'rgba(120,120,120,.5)'}}/><MenuIcon sx={{color: '#911111'}}/><MenuIcon sx={{color: 'yellow'}}/></Stack>

column is actually the default value, but I added it just to show how it works. I also added spacing={2} to the Stack. This is a handy value that adds margin-top to the children components.

Finally, I added color to each icon using the theme, rgba, hex, and color name. The sx prop makes quick work of this.

FAQs

How do you Customize MUI Icons?

You can easily customize MUI Icons with the ‘sx’ prop. Here’s an example of custom icon border:
<MenuIcon sx={{border: '1px solid blue', borderRadius: 4}}/>

How do I get Material-UI Icons in My Project?

MUI Icons are used as components in your JSX code. First, add the proper dependencies:
npm install @emotion/react, @emotion/styled, @mui/icons-material, @mui/material
Next, import the desired icon:
import CheckIcon from '@mui/icons-material/Check';
Finally, use the icon in your React code:
<div><CheckIcon/></div>

Resources

Additional related posts:

List of MUI Icons

MUI Icon Docs

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.