How to align startIcon material ui icon at the center?

Question

I'm attempting to keep the icon button center aligned, but something isn't working right. Adding left: "0.5rem" to sx prop is pushing the button icon further. I'm trying not to use makeStyles to override the position. Any tip/direction would be helpful:)

Sandbox link

Answer 1

You can try using style:

<Stack direction="row" style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
  <Tooltip title="Delete">
    <Button sx={{ minWidth: 0 }} startIcon={<DeleteIcon />} />
  </Tooltip>
  <Divider orientation="vertical" flexItem />
  <Tooltip title="Send">
    <Button sx={{ minWidth: 0 }} startIcon={<SendIcon />} />
  </Tooltip>
  <Tooltip title="Headset">
    <Button sx={{ minWidth: 0 }} startIcon={<HeadsetMicOutlined />} />
  </Tooltip>
  <Divider orientation="vertical" flexItem />
</Stack>

Answer 2

In case you want to set it in you theme here is how you can do it so you don't have to do it in every Button component.

export const theme = createTheme({
  ...
  components: {
    MuiButton: {
      styleOverrides: {
        startIcon: {
          margin: '0'
        },
      },
    }
  },
});