React MUI Icons Display

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Icons Display. Icons can be used in a react app with the help of MUI Icons. The MUI provides three ways to add an Icon as given below.

1. Material Icons: It is exported as React components (SVG icons). These can be directly imported by specifying their respective icon name and using it in our application. The full list of Icons can be found this link.
2. SVG Icons: It is used in case if one needs to add a custom icon. It extends the native <svg> element and properly inherits the color from the icon itself.
3. Icon Component (Font icons): This is used if one wants to use icon fonts that support ligatures. The Icon component of MUI wraps the icon ligature and helps to display the icon correctly in React.

Which approach better between Font Icons and SVG Icons: Both of the approaches are fine, but SVG is preferred as it allows for code splitting, supports a larger number of icons, and renders faster in the browser.

Accessibility: To make the icons accessible, one has to make sure to distinguish between decorative and semantic icons.

• Decorative icons are the ones that can be removed from the page and the user would not face any problem in accessing the page. These are mostly used for branding and decoration.
• Semantic icons are icons that have uses in the page like buttons, toggles, form elements. Removing these may cause user experience problems.

API: The icons component uses the <Icon /> and <SvgIcon /> APIs.

Syntax:

For Material Icons:

import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';

For SVG Icons:

<SvgIcon>
      <path ... />
</SvgIcon>

For Custom Icon Component:

import Icon from '@mui/material/Icon';
<Icon>IconName</Icon>;

Creating React Project:

Step 1: To create a react app, you need to install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

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

Step 4: Installation of MUI Icons:

npm install @mui/icons-material

Project Structure:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI Material Icons.

Javascript

import React from "react";
import { GitHub, LinkedIn } from '@mui/icons-material';

function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Icons Display</h2>
            </div>
            <center>
                <GitHub style={{ color: 'black', fontSize: 50 }} />
                <LinkedIn style={{ color: 'blue', fontSize: 50 }} />
            </center>
        </div>
    );
}

export default App;

Output:

React MUI Icons Display

Example 2: Below example demonstrates the React MUI SVG Icons.

Javascript

import React from "react";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI Icons Display</h2>
            </div>
            <center>
                <div>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="32"
                        height="32"
                        fill="currentColor"
                        class="bi bi-browser-chrome"
                        viewBox="0 0 16 16"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995
                                2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8
                                8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978
                                2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986
                                2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0
                                8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418
                                5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0
                                0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
                        />
                    </svg>
                </div>
                <div>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="32"
                        height="32"
                        fill="currentColor"
                        class="bi bi-browser-firefox"
                        viewBox="0 0 16 16"
                    >
                        <path d="M13.384 3.408c.535.276 1.22 1.152 1.556 1.963a7.98 7.98 0 0 1
                                .503 3.897l-.009.077a8.533 8.533 0 0 1-.026.224A7.758 7.758 0 0 1 .006
                                8.257v-.04c.016-.363.055-.724.114-1.082.01-.074.075-.42.09-.489l.01-.051a6.551
                                6.551 0 0 1
                                1.041-2.35c.217-.31.46-.6.725-.87.233-.238.487-.456.758-.65a1.5 1.5
                                0 0 1 .26-.137c-.018.268-.04 1.553.268 1.943h.003a5.744 5.744 0 0 1
                                1.868-1.443 3.597 3.597 0 0 0 .021
                                1.896c.07.047.137.098.2.152.107.09.226.207.454.433l.068.066.009.009a1.933
                                1.933 0 0 0 .213.18c.383.287.943.563
                                1.306.741.201.1.342.168.359.193l.004.008c-.012.193-.695.858-.933.858-2.206
                                0-2.564 1.335-2.564 1.335.087.997.714 1.839 1.517 2.357a3.72 3.72 0 0 0
                                .439.241c.076.034.152.065.228.094.325.115.665.18
                                1.01.194 3.043.143 4.155-2.804 3.129-4.745v-.001a3.005 3.005 0 0
                                0-.731-.9 2.945 2.945 0 0 0-.571-.37l-.003-.002a2.679 2.679
                                0 0 1 1.87.454 3.915 3.915 0 0
                                0-3.396-1.983c-.078 0-.153.005-.23.01l-.042.003V4.31h-.002a3.882
                                3.882 0 0 0-.8.14 6.454 6.454
                                0 0 0-.333-.314 2.321 2.321 0 0 0-.2-.152 3.594 3.594 0 0 1-.088-.383
                                4.88 4.88 0 0 1 1.352-.289l.05-.003c.052-.004.125-.01.205-.012C7.996
                                2.212 8.733.843
                                10.17.002l-.003.005.003-.001.002-.002h.002l.002-.002a.028.028
                                0 0 1 .015 0 .02.02 0 0 1 .012.007 2.408 2.408 0 0 0
                                .206.48c.06.103.122.2.183.297.49.774 1.023 1.379 1.543 1.968.771.874 1.512
                                1.715 2.036 3.02l-.001-.013a8.06 8.06 0 0 0-.786-2.353Z" />
                    </svg>
                </div>
            </center>
        </div>
    );
}

export default App;

Output:

React MUI Icons Display

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