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.
Below all the steps are described order wise to add colors to icons.
- 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.
Example 2: Changing the color of the icon to red.
Hence using the above-mentioned steps, we can use the Material-UI to import and change the color of icons in React.