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:

I don't know material but this could also be entirely the fault of the icon and how the viewbox is setup for it. — Dominik, Feb 10 '21 at 23:58
I think it expects a label text but I haven't been able to center the icon — KillMe, Feb 11 '21 at 00:39

Rajiv · Accepted Answer · 2021-02-11T14:43:37.020

3

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:

edited Feb 11 '21 at 14:43

answered Feb 11 '21 at 05:17

Rajiv

3,346
2
12
27

I wanted the button outline as square instead of rectangle – KillMe Feb 11 '21 at 06:13
for that add a `minWidth` of the same value as of `maxWidth`.. I've updated the answer and demo.... check that – Rajiv Feb 11 '21 at 14:42

Align icon inside Material UI Button

1 Answers1