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
npm install @mui/material @emotion/react @emotion/styled
  • For Yarn developers
yarn add @mui/material @emotion/react @emotion/styled

Install material icon package

  • For NPM developers
npm install @mui/icons-material
  • For Yarn developers
yarn 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.

import * as React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import DeleteIcon from '@mui/icons-material/Delete';

export default function SvgMaterialIcons() {
  return (
    <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
      <Grid item xs={6}>
        <Typography>Default</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon />
      </Grid>
    </Grid>
  );
}

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.

import * as React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import DeleteIcon from '@mui/icons-material/Delete';

export default function SvgMaterialIcons() {
  return (
    <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
      <Grid item xs={6}>
        <Typography>Small</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon fontSize="small" />
      </Grid>
      <Grid item xs={6}>
        <Typography>Default</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon />
      </Grid>
      <Grid item xs={6}>
        <Typography>Large</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon fontSize="large" />
      </Grid>
    </Grid>
  );
}

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.

import * as React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import DeleteIcon from '@mui/icons-material/Delete';

export default function SvgMaterialIcons() {
  return (
    <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
      <Grid item xs={6}>
        <DeleteIcon sx={{ fontSize: 50 }} />
      </Grid>
    </Grid>
  );
}

Combined examples with output

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

import * as React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import DeleteIcon from '@mui/icons-material/Delete';

export default function SvgMaterialIcons() {
  return (
    <Grid container sx={{ color: 'text.primary', width: '50%', margin: 'auto', marginTop: '50px' }}>
      <Grid item xs={6}>
        <Typography>Small</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon fontSize="small" />
      </Grid>
      <Grid item xs={6}>
        <Typography>Default</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon />
      </Grid>
      <Grid item xs={6}>
        <Typography>Large</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon fontSize="large" />
      </Grid>
      <Grid item xs={6}>
        <Typography>Custom Font size</Typography>
      </Grid>
      <Grid item xs={6}>
        <DeleteIcon sx={{ fontSize: 50 }} />
      </Grid>
    </Grid>
  );
}

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 đź‘Ť.