Navigate back to the homepage

How to change material icon color in react?

Infinitbility
React
May 12th, 2022 · 1 min read
keep affilitate

Hi Friends 👋,

Welcome To Infinitbility! ❤️

Today, we will learn to change the color of mui icon ( material icons ) with installation steps also an example of custom color, custom HEX color, and custom RGB color.

Want list of all material icons, Click Here.

Let’s start today’s tutorial How to change material icon color in react?

Table Of Content

  1. Installation
  2. Example of using material icon
  3. Example of color material icon
  4. Example of custom color
  5. Example of custom HEX color
  6. Example of custom RGB color
  7. Combined examples with output

Okay, now we know what we are going to do let’s start with Installation.


Installation

Install material package ( MUI )

  • For NPM developers
1npm install @mui/material @emotion/react @emotion/styled
  • For Yarn developers
1yarn add @mui/material @emotion/react @emotion/styled

Install material icon package

  • For NPM developers
1npm install @mui/icons-material
  • For Yarn developers
1yarn add @mui/icons-material

Example of use material icon

We have installed material icons in our react.js project, now we have to import some sample icons from the package and use it in a component.

Here, we are using an example of a delete icon.

1import * as React from 'react';
2import Grid from '@mui/material/Grid';
3import Typography from '@mui/material/Typography';
4import DeleteIcon from '@mui/icons-material/Delete';
5
6export default function SvgMaterialIcons() {
7 return (
8 <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
9 <Grid item xs={6}>
10 <Typography>Default</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon />
14 </Grid>
15 </Grid>
16 );
17}

Example of color material icon

MUI provides its own defined colors like primary, secondary, etc. to color in the material icon.

let’s see how we can able do that in material icons.

1import * as React from 'react';
2import Grid from '@mui/material/Grid';
3import Typography from '@mui/material/Typography';
4import DeleteIcon from '@mui/icons-material/Delete';
5
6export default function SvgMaterialIcons() {
7 return (
8 <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
9 <Grid item xs={6}>
10 <Typography>Primary</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon color="primary" />
14 </Grid>
15 <Grid item xs={6}>
16 <Typography>Secondary</Typography>
17 </Grid>
18 <Grid item xs={6}>
19 <DeleteIcon color="secondary" />
20 </Grid>
21 <Grid item xs={6}>
22 <Typography>Success</Typography>
23 </Grid>
24 <Grid item xs={6}>
25 <DeleteIcon color="success" />
26 </Grid>
27 <Grid item xs={6}>
28 <Typography>Action</Typography>
29 </Grid>
30 <Grid item xs={6}>
31 <DeleteIcon color="action" />
32 </Grid>
33 <Grid item xs={6}>
34 <Typography>Disabled</Typography>
35 </Grid>
36 <Grid item xs={6}>
37 <DeleteIcon color="disabled" />
38 </Grid>
39 <Grid item xs={6}>
40 <Typography>Custom Color</Typography>
41 </Grid>
42 </Grid>
43 );
44}

Example of custom color

Here, we will see how we can use custom colors name like pink, blue, etc.

1import * as React from 'react';
2import Grid from '@mui/material/Grid';
3import Typography from '@mui/material/Typography';
4import DeleteIcon from '@mui/icons-material/Delete';
5
6export default function SvgMaterialIcons() {
7 return (
8 <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
9 <Grid item xs={6}>
10 <Typography>Custom Color</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon sx={{ color: 'pink' }} />
14 </Grid>
15 </Grid>
16 );
17}

Example of custom HEX color

Generally, everyone use HEX color let’s see how can we use in our material icon.

1import * as React from 'react';
2import Grid from '@mui/material/Grid';
3import Typography from '@mui/material/Typography';
4import DeleteIcon from '@mui/icons-material/Delete';
5
6export default function SvgMaterialIcons() {
7 return (
8 <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
9 <Grid item xs={6}>
10 <Typography>Custom Hex Color</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon sx={{ color: '#af7834' }} />
14 </Grid>
15 </Grid>
16 );
17}

Example of custom RGB color

The RGB color is one of the most used color combinations, let’s see how can we apply to material icons.

1import * as React from 'react';
2import Grid from '@mui/material/Grid';
3import Typography from '@mui/material/Typography';
4import DeleteIcon from '@mui/icons-material/Delete';
5
6export default function SvgMaterialIcons() {
7 return (
8 <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
9 <Grid item xs={6}>
10 <Typography>Custom RGB Color</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon sx={{ color: 'rgb(104, 223, 205)' }} />
14 </Grid>
15 </Grid>
16 );
17}

Combined examples with output

Here, we will combine all the above examples in one file and run it in react project.

1import * as React from 'react';
2import Grid from '@mui/material/Grid';
3import Typography from '@mui/material/Typography';
4import DeleteIcon from '@mui/icons-material/Delete';
5
6export default function SvgMaterialIcons() {
7 return (
8 <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
9 <Grid item xs={6}>
10 <Typography>Default</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon />
14 </Grid>
15 <Grid item xs={6}>
16 <Typography>Primary</Typography>
17 </Grid>
18 <Grid item xs={6}>
19 <DeleteIcon color="primary" />
20 </Grid>
21 <Grid item xs={6}>
22 <Typography>Secondary</Typography>
23 </Grid>
24 <Grid item xs={6}>
25 <DeleteIcon color="secondary" />
26 </Grid>
27 <Grid item xs={6}>
28 <Typography>Success</Typography>
29 </Grid>
30 <Grid item xs={6}>
31 <DeleteIcon color="success" />
32 </Grid>
33 <Grid item xs={6}>
34 <Typography>Action</Typography>
35 </Grid>
36 <Grid item xs={6}>
37 <DeleteIcon color="action" />
38 </Grid>
39 <Grid item xs={6}>
40 <Typography>Disabled</Typography>
41 </Grid>
42 <Grid item xs={6}>
43 <DeleteIcon color="disabled" />
44 </Grid>
45 <Grid item xs={6}>
46 <Typography>Custom Color</Typography>
47 </Grid>
48 <Grid item xs={6}>
49 <DeleteIcon sx={{ color: 'pink' }} />
50 </Grid>
51 <Grid item xs={6}>
52 <Typography>Custom Hex Color</Typography>
53 </Grid>
54 <Grid item xs={6}>
55 <DeleteIcon sx={{ color: '#af7834' }} />
56 </Grid>
57 <Grid item xs={6}>
58 <Typography>Custom RGB Color</Typography>
59 </Grid>
60 <Grid item xs={6}>
61 <DeleteIcon sx={{ color: 'rgb(104, 223, 205)' }} />
62 </Grid>
63 </Grid>
64 );
65}

Output

when you run the above code, you will get the output of all mentioned color icons. let’s see the output.

React, Material icon color example
React, Material icon color example

All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to check boolean value in if condition in javascript?

Example of check boolean value in if condition in javascript with step by step guide.

May 11th, 2022 · 1 min read

How to check both undefined and null in typescript?

TypeScript, check both undefined and null example with step by step guide.

May 10th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]