更改 IconButton 颜色

Question

I want to add a custom color to IconButton

      <IconButton variant='contained'>
        <StarBorderRoundedIcon color='red' />
      </IconButton>

and this is the output

The red color is not working.

Answer 1

Color property on the icon here refers to the theme color property so you can define colors as primary,success,action.. You can use style property instead something like

<IconButton variant='contained'>
        <StarBorderRoundedIcon style={{color:'red'}} />
</IconButton>

Working demo

or you can use sx property

<IconButton variant='contained'>
            <StarBorderRoundedIcon sx={{color:'red'}} />
    </IconButton>

Answer 2

 <IconButton variant='contained' style="background-color: red"> <StarBorderRoundedIcon/> </IconButton>