How to style MUI5's two tone icons while having a transparent background

Question

and here is the code trying to achieve the above. however the issue is the additional square frame over the <HighlightOffTwoTone /> icon:

import { Chip, IconButton } from '@mui/material'
import { HighlightOffTwoTone } from '@mui/icons-material'

const myChip = () => {

    return (
        <Chip
            sx={{
                borderColor: '#EBFFEC',
                color: '#009405',
                backgroundColor: '#EBFFEC',
            }}
            label='Chip Text'
            deleteIcon={
                <IconButton>
                    <HighlightOffTwoTone
                        sx={{ color: '#fff', backgroundColor: '#A2E8A5' }}
                    />
                </IconButton>
            }
            onDelete={() => console.log('clicked')}
        />
    )
}

how to get rid of the square frame background on the <HighlightOffTwoTone />?

Answer 1

The quickest solution is you can add borderRadius: '100%' in your HighlightOffTwoTone sx property like the code below.

    <Chip
        sx={{
          borderColor: "#EBFFEC",
          color: "#009405",
          backgroundColor: "#EBFFEC"
        }}
        label="Chip Text"
        deleteIcon={
          <IconButton>
            <HighlightOffTwoTone
              sx={{
                color: "#fff",
                backgroundColor: "#A2E8A5",
                borderRadius: "100%", // Add the border radius here
              }}
            />
          </IconButton>
        }
        onDelete={() => console.log("clicked")}
      />