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
- Installation
- Example of using material icon
- Example of color material icon
- Example of custom color
- Example of custom HEX color
- Example of custom RGB color
- 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';56export 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';56export 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';56export 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';56export 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';56export 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';56export 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.
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.
