0

I'm trying to override the material-ui icon inside sx prop to see my icon as rounded square. Changing the color and fontSize works, but borderRadius doesn't

import * as React from 'react';
import Badge from '@mui/material/Badge';
import Crop32OutlinedIcon from '@mui/icons-material/Crop32Outlined';

export default function SimpleBadge() {
  return (
    <Badge badgeContent={2} color="secondary">
      <Crop32OutlinedIcon
        sx={{
          fontSize: 24,
          color: 'blue',
          borderRadius: '30%'
        }}
        onClick={() => console.log('Icon clicked')}
      />
    </Badge>
  );
}

Not sure why my borderRadius is not making the change here. Am I missing something?

user2824374
  • 168
  • 3
  • 14
  • Changing the border radius works for the background. You cannot change the icon using that. Color and fontSize are applied to content while borderRadius is applied on the wrapper of the content. – poo Jul 25 '22 at 07:22
  • @poo Yeah I thought so. I tried to use startIcon inside Button component. Unable to change the border radius for the icon. `} > Hello ` Not sure whether this is the limitation. What's the workaround would you recommend? – user2824374 Jul 25 '22 at 07:30
  • You need to use another icon in that case which is similar to your need. – poo Jul 25 '22 at 08:49

1 Answers1

0

You can't change the border-radius of a svg icon like Crop32OutlinedIcon. because it's roundness is defined within it's <path> values.

You should use another icon like Crop32RoundedIcon, or some other icon from custom libraries. But if you need more customization, You can build your own svg icon. If this the case for you, this thread can help you.

Hamed Siaban
  • 1,342
  • 1
  • 9
  • 18