How to align center mui icon in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To align center mui icon in react js, you can create .center-side and put justify-content: center;. It will align center mui icon in React JS.

Today, I am going to show you, How to align center mui icon in react js

Installation

Install the following packages to align center mui icon button in react js.

npm

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

yarn

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

Table of contents

• Install MUI and create a new React app.
• Import Material-UI icon.
• Use the icon Component.

Step 1: Install MUI and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import Material-UI icon.

After installing MUI, you have to import your React component. To do this, add the following line to the top of your component file.

import React from "react";
import AccessAlarmIcon from "@mui/icons-material/AccessAlarm";
import "./App.css";

Step 3: Use the icon Component.

Each Material icon also has a “theme”: Filled (default), Outlined, Rounded, Two-tone, and Sharp. To import the icon component with a theme other than the default, append the theme name to the icon name.

<div className="center-side">
  <AccessAlarmIcon />
</div>

MUI material align center mui icon example.

The below code is an example, you need to import icon Component. Then, you can create .center-side and put justify-content: center;. Then it will align center mui icon in react js.

App.js

import React from "react";
import AccessAlarmIcon from "@mui/icons-material/AccessAlarm";
import "./App.css";

const App = () => {
  return (
    <div className="center-side">
      <AccessAlarmIcon />
    </div>
  );
};

export default App;

App.css

.center-side {
  border: 2px solid black;
  width: 500px;
  display: flex;
  justify-content: center;
} 

In the above code example, I have used the @mui/material component and align center mui icon in react js.

All the best