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

25 Oct, 2020
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-UIimport 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-UIimport 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. 
Material-UI
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to redirect to another page in ReactJS ?
Difference Between PUT and PATCH Request
How to execute PHP code using command line ?
How to pass data from child component to its parent in ReactJS ?
How to Insert Form Data into Database using PHP ?