CODEWITHSUNDEEP
reactjsmaterial-ui
DragoJokera
DragoJokera

Reputation: 1035

Remove Material UI icon margin

Does anyone know how to remove the margin from material UI icons!? I want for mobile to remove that margin, which is margin-left: -4px and margin-right: 8px ? Is there anyway to override it with classes? The code below is not working:

personIcon: {
    color: theme.palette.primary.main,
    fontSize: "27px !important",
    [theme.breakpoints.down("xs")]: {
      margin: "0px !important",
    },
  },

In addition I want to override it only for the current component. ;] enter image description here

Upvotes: 1

Views: 9203

Answers (2)

hotpink
hotpink

Reputation: 3226

You need to target the startIcon customization point, as documented here.

In my example I just used SvgIcon so I don't have to fiddle around with looking for the icons module. You can import Person from @material-ui/icons/person

const { Button, makeStyles, SvgIcon, createMuiTheme } = MaterialUI;

const theme = createMuiTheme();
const useStyles = makeStyles((theme) => ({
  icon: {
    '&& > svg': {
      fontSize: 27,
    },
    [theme.breakpoints.down('xs')]: {
      margin: 0,
    },
  },
}));

const NoMargin = () => {
  const classes = useStyles();

  return (
    <Button
      classes={{ startIcon: classes.icon }}
      startIcon={
        <SvgIcon>
          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
        </SvgIcon>
      }
    >
      click me
    </Button>
  );
};

ReactDOM.render(<NoMargin />, document.getElementById('root'))
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

Upvotes: 2

b3hr4d
b3hr4d

Reputation: 4578

Try this :

personIcon: {
    color: theme.palette.primary.main,
    fontSize: "27px !important",
    [theme.breakpoints.down("xs")]: {
      "& > *": {
         margin: 0,
       },
    },
},

Upvotes: 0

Related Questions