How to align startIcon material ui icon at the center?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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'
        },
      },
    }
  },
});