How to position MUI badge in IconButton border in ReactJS?

Question

I have made a Bluetooth connection status indicator using a tooltip and a badge. However I'm struggling with the badge's positioning.

Here's my code:

<Tooltip className={classes.help} title={getBluetoothStatus()}>
  <IconButton onClick={props.onClick} size="large">
    <Badge badgeContent="✔" color="success" overlap="circular">
      <BluetoothIcon />
    </Badge>
  </IconButton>
</Tooltip>

Which looks like this:

However, I want the badge to be positioned on the edge of the circular IconButton. I've tried placing the Badge around the IconButton like so:

<Tooltip className={classes.help} title={getBluetoothStatus()}>
  <Badge badgeContent="✔" color="primary" overlap="circular">
    <IconButton onClick={props.onClick} size="large">
      <BluetoothIcon />
    </IconButton>
  </Badge>
</Tooltip>

This does place the Badge more outwards and fixes the issue. Unfortunately it add an unwanted square:

I've tried adding css properties such as padding, margin and transform:translate to no avail :(

Any thoughts or suggestions are highly appreciated, thanks!