How to Change the Color of Icons using Material-UI in ReactJS?

Changing the icon colors makes us able to keep the webpage according to themes. Material-UI icons is a React based module. React supports more than 1000 Material-UI icons. It is one of the most popular and in-demand frameworks.

Approach

To change the color of icons using the Material UI in React JS we will be using the style prop and set color for the color property. We can also use the sx prop in place of the style prop.

Steps to SetUp React Project and Install MUI

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm i @material-ui/icons

Project Structure:

The updated dependencies in the package.json file.

"dependencies": {
    "@material-ui/icons": "^4.11.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

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

Example 1: This example changes the color of icon in material ui with the help of style prop and setting color property to blue.

// Filename - App.js

import React from "react";

// Importing Home icon from 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: This example changes the color of icon in material ui with the help of sx prop and setting color property to blue.

// Filename - App.js

import React from "react";

// 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 sx={{ 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. 

Conclusion

We can easily change the color of icom in MUI using react with the help of inline styling i.e., style prop as well as sx prop. Alternatively we can used MUI themes, importing color pallete from MUI or using predefined colors with color prop like primary, warning etc.