React MUI Material Icons

MUI or Material-UI, it’s a React component library. It enables you to build your own design system and develop React applications faster. It is basically a design language that was developed by Google in 2014. It uses more Design and Animation, grid-system, and provides shadows and lightning effects.

Material UI icons are a pre-made set of icons that can be extracted from the MUI component system and embedded into any React application.MUI contains over 2000 icons based on Material Design guidelines set by Google. MUI provides high-quality icons which are very flexible, you can change color and resize the icons according to your project’s needs.

 The Material UI Icons are of the following five types:

• Filled
• Outlined
• Rounded
• Two-tone
• Sharp

Syntax:

<AppleIcon/>

Let’s understand with the help of examples. 

Creating react application:

Step 1: Create a new react project. Go to your terminal and enter the following command.

 npx create-react-app appname

Step 2: We need to install two more packages before installing MUI Icons. Install Material UI and Material Icons package by using npm.

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

Step 3: Go to Material Icons page and search for the icons.

• Click on the Icon which you want and you will see a popup.

• Now copy the import statement you see below.

import AppleIcon from '@mui/icons-material/Apple';

• Paste it in the component where you want to use it.

Example 1: This example illustrates the use of MUI-Icons. Add this code to the App.js file.

Javascript

import * as React from "react";
import AppleIcon from "@mui/icons-material/Apple";
import AndroidIcon from "@mui/icons-material/Android";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import SearchIcon from "@mui/icons-material/Search";

function App() {
    return (
        <>
            <div style={{ textAlign: "center" }}>
                <div style={{ color: "green",
                     fontSize: "50px" }}>
                  GeeksforGeeks
                 </div>
                <h3>Testing MUI-Icons</h3>
                <Stack
                    justifyContent="center"
                    alignItems="center"
                    spacing={5}
                    direction="row"
                >
                    <Button variant="outlined">
                        <AppleIcon />
                        Apple
                    </Button>
                    <Button variant="outlined">
                        <AndroidIcon />
                        Android
                    </Button>
                    <Button variant="outlined">
                        <PowerSettingsNewIcon />
                        Setting
                    </Button>
                    <Button variant="outlined">
                        <SearchIcon />
                        Search
                    </Button>
                </Stack>
            </div>
        </>
    );
}

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Example 2: This example illustrates the use of MUI-Icons with different colors. Add this code to the App.js file.

Javascript

import * as React from "react";
import AppleIcon from "@mui/icons-material/Apple";
import AndroidIcon from "@mui/icons-material/Android";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import SearchIcon from "@mui/icons-material/Search";

function App() {
    return (
        <>
            <div style={{ textAlign: "center" }}>
                <div style={{ color: "green",
                     fontSize: "50px" }}>
                  GeeksforGeeks
                  </div>

                <h3>Testing MUI-Icons</h3>
                <Stack
                    justifyContent="center"
                    alignItems="center"
                    spacing={5}
                    direction="row"
                >
                    <Button variant="outlined">
                        <AppleIcon style={{ color: "grey" }} />
                        Apple
                    </Button>
                    <Button variant="outlined">
                        <AndroidIcon style={{ color: "green" }} />
                        Android
                    </Button>
                    <Button variant="outlined">
                        <PowerSettingsNewIcon style={{ color: "black" }} />
                        Setting
                    </Button>
                    <Button variant="outlined">
                        <SearchIcon style={{ color: "gold" }} />
                        Search
                    </Button>
                </Stack>
            </div>
        </>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/material-icons/