Change IconButton color-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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>