How to change the color of icons using Material-UI in ReactJS?

Material-UI icons is a React based module. The Material-UI library provides users with the most efficient, effective, and user-friendly interface. React provides more than 1000 Material-UI icons. It is one of the most popular and in-demand frameworks. For using Material-UI in React we need to install Material-UI and Material-UI icons. Moreover, for the custom styling, you can always refer to the API of the SVG icon component in Material-UI.

Prerequisites:

• Basics of ReactJS
• Already created ReactJS app

Below all the steps are described order wise to add colors to icons.

Installation:

• Step 1: Before moving further, firstly we have to install the Material-UI module, by running the following command in your project directory, with the help of terminal in your src folder or you can also run this command in Visual Studio Code’s terminal in your project folder.

npm install @material-ui/core 

• Step 2: After installing the Material-UI module, now install Material-UI icons by running the following command in your project directory, with the help of a terminal in your src folder or you can also run this command in Visual Studio Code’s terminal in your project folder.

npm install @material-ui/icons

• Step 3: After installing the modules, now open your App.js file which is present inside your project’s directory, under src folder, and delete the code present inside it.
• Step 4: Now, after the installation, we can change the colors of the icon by using the color prop of the icon component.  We can also use the style prop for the same.
• Step 5: Now import React, Material-UI core colors, and Material-UI icon modules
• Step 6: In your app.js file, add this code snippet to import  React, Material-UI core colors, and Material-UI icon modules.

import React from 'react';
import green from "@material-ui/core/colors/green";
import MailIcon from "@material-ui/icons/Mail";

Below is a sample program to illustrate the use of color prop :

Example 1:Changing the color of the icon to green.

• app.js:

Javascript

import React from 'react';

// Importing the color of your choice from Material-UI
import green from "@material-ui/core/colors/green";

// Importing Home icon from Material-UI . You can refer to the
// API of this SVG icon component in Material-UI
import HomeIcon from "@material-ui/icons/HomeTwoTone";

export default function App() {
  return (
    <div classname="App">
      <h1><center>GeeksForGeeks</center></h1>
      {/* We provide inline css to make the color of the home
          icon as green. We use style prop for the same. */}
      <center><HomeIcon style={{ color: "green" }} /></center>
      <h2><center>Let's start</center></h2>
    </div>
  );
}

• Output

Example 2: Changing the color of the icon to red.

• app.js:

Javascript

import React from 'react';

// Importing the color of your choice from Material-UI
import red from "@material-ui/core/colors/red";

// Importing Home icon from Material-UI . You can refer to
// the API of this SVG icon component in Material-UI
import HomeIcon from "@material-ui/icons/HomeTwoTone";

export default function App() {
  return (
    <div classname="App">
      <h1><center>GeeksForGeeks</center></h1>
      {/* We provide inline css to make the color of the
          home icon as green. We use style prop for the same. */}
      <center><HomeIcon style={{ color: "red" }} /></center>
      <h2><center>Let's start</center></h2>
    </div>
  );
}

• Output

Hence using the above-mentioned steps, we can use the Material-UI to import and change the color of icons in React.