Align icon inside Material UI Button

Question

How to insert an icon centering material ui button?

Piece of Code:

 <Button variant="outlined" startIcon={<Add color='primary'/>} style={{ maxWidth: "36px" }} />

Expected behavior:

Current behavior:

Answer 1

this margin is coming from startIcon class from material-ui itself. To remove this pass a class in to the startIcon in classes prop.

<Button
    style={{ maxWidth: "36px", minWidth: "36px" }}
    classes={{ startIcon: classes.startICon }}
    variant="outlined"
    startIcon={<Add />}
></Button>

And add the class in the useStyles to remove the margin.

const useStyles = makeStyles((theme) => ({
  startICon: {
    margin: 0
  }
}));

Here is the working demo: