React MUI Icon API

MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI Icon API. The icon element is used to create different icons of different shapes and sizes with various colors. The icons to display are provided in the MUI library. The API provides a lot of functionality and we will learn to implement them.

Import Icon API:

import Icon from '@mui/material/Icon';
// or
import { Icon } from '@mui/material';

Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.

• baseClassName(string): It is the base class to set the font for the icon. The default value is material-icons.
• children (node): It is the name of the icon font ligature.
• component (elementType): It is the component used for the root node. It can be either an HTML string or a component.
• color(inherit/action/disabled/primary/secondary/error/info/success/warning): It is used to set the colour of the icon. The default value is inherited.
• fontSize(large, small, medium, inherit): It is used to set the size of the icon. The default value is medium.
• sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles

CSS Rules:

• root(.MuiIcon-root): It is the style applied to the root element.
• colorPrimary(.MuiIcon-colorPrimary): It is the style applied to the root element if the color is set to primary.
• colorSecondary(.MuiIcon-colorSecondary): It is the style applied to the root element if the color is set to secondary.
• colorAction(.MuiIcon-colorAction): It is the style applied to the root element if color is set to action.
• colorError(.MuiIcon-colorError): It is the style applied to the root element if the color is set to error.
• colorDisabled(.MuiIcon-colorDisabled): It is the style applied to the root element if the color is set to disable.
• fontSizeInherit(.MuiIcon-fontSizeInherit): It is the style applied to the root element if fontSize is set to inherit.
• fontSizeSmall(.MuiIcon-fontSizeSmall): It is the style applied to the root element if fontSize is set to small.
• fontSizeLarge(.MuiIcon-fontSizeLarge): It is the style applied to the root element if fontSize is set to large.

Syntax: Create an Icon element as follows:

Importing API:

import HomeIcon from '@mui/icons-material/Home';

<HomeIcon />

Installing and Creating React app, and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

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

Project Structure: The project should look like the below:

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have Icon elements.

App.js

import "./App.css";
import * as React from "react";
import { Code, Computer, Home, Web }
    from "@mui/icons-material";

function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>
                  React MUI Icon API
                </strong>
            </div>
            <br />
            <div
                style={{
                    margin: "auto",
                    display: "flex",
                    justifyContent: "space-evenly",
                }}
            >
                <Home />
                <Web />
                <Code />
                <Computer />
            </div>
        </div>
    );
}
export default App;

Output:

Example 2: In the following example, we have Icons of different sizes and colors.

App.js

import "./App.css";
import * as React from "react";
import { Code, Computer, Home, Web } from
    "@mui/icons-material";

function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Icon API</strong>
            </div>
            <br />
            <div
                style={{
                    margin: "auto",
                    display: "flex",
                    justifyContent: "space-evenly",
                }}
            >
                <Home fontSize="large"
                   color="error" />
                <Web fontSize="medium"
                   color="warning" />
                <Code fontSize="small"
                   color="primary" />
            </div>
        </div>
    );
}
export default App;

Output:

Reference: https://mui.com/material-ui/api/icon/