Navigate back to the homepage

How to change material icon size react?

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

Hi Friends 👋,

Welcome To Infinitbility! ❤️

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

Want list of all material icons, Click Here.

Let’s start the today’s tutorial How to change material icon size react?

Table Of Content

  1. Installation
  2. Example of using the material icon
  3. Example of Material icon font size
  4. Example of Material icon custom font size
  5. 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 the example of the 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 Material icon font size

To change the size of the icon, the material icon provides fontSize attribute and their own defined sizes like small, large, etc.

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>Small</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon fontSize="small" />
14 </Grid>
15 <Grid item xs={6}>
16 <Typography>Default</Typography>
17 </Grid>
18 <Grid item xs={6}>
19 <DeleteIcon />
20 </Grid>
21 <Grid item xs={6}>
22 <Typography>Large</Typography>
23 </Grid>
24 <Grid item xs={6}>
25 <DeleteIcon fontSize="large" />
26 </Grid>
27 </Grid>
28 );
29}

Example of Material icon custom font size

To handle every icon size and dynamic size, the Material icon provide the sx attribute where we have to provide font size like a CSS.

let’s see how can we do that.

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 <DeleteIcon sx={{ fontSize: 50 }} />
11 </Grid>
12 </Grid>
13 );
14}

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>Small</Typography>
11 </Grid>
12 <Grid item xs={6}>
13 <DeleteIcon fontSize="small" />
14 </Grid>
15 <Grid item xs={6}>
16 <Typography>Default</Typography>
17 </Grid>
18 <Grid item xs={6}>
19 <DeleteIcon />
20 </Grid>
21 <Grid item xs={6}>
22 <Typography>Large</Typography>
23 </Grid>
24 <Grid item xs={6}>
25 <DeleteIcon fontSize="large" />
26 </Grid>
27 <Grid item xs={6}>
28 <Typography>Custom Font size</Typography>
29 </Grid>
30 <Grid item xs={6}>
31 <DeleteIcon sx={{ fontSize: 50 }} />
32 </Grid>
33 </Grid>
34 );
35}

Output

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

React, Material icon size example
React, Material icon size 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 change material icon color in react?

React material icon color examples with a guide to change as per requirement.

May 12th, 2022 · 1 min read

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
© 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]