CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
africandrogba
africandrogba

Reputation: 432

Unable to override values of StartIcon margin in MUI Button example

I am trying to use the Button in the material UI. I took the example of the Button where there is a start Icon. However I am unable to override the default margin that comes with the StartIcon CSS enter image description here

I tried different things to override it

<Button sx={{ '& .MuiButton-startIcon': {marginRight: '0px'}}} startIcon = {settings_slider}> All Filters </Button>

<Button sx={{ root: {'& .MuiButton-startIcon': {marginRight: '0px'}}}} startIcon = {settings_slider}> All Filters </Button>

<Button sx={{ startIcon: {'& .MuiButton-startIcon': {marginRight: '0px'}}}} startIcon = {settings_slider}> All Filters </Button>

Nothing worked.

You can find the running example here https://yzbbo5.csb.app/

Upvotes: 1

Views: 3816

Answers (3)

Rajesh kumar
Rajesh kumar

Reputation: 69

I also observed that "sx" is not working but with "style" i am able to override the styles of endIcon or startIcon

<Button startIcon = {<DeleteIcon style={{marginRight: '2px'}} />}> All Filters </Button>

Upvotes: 0

Angelesm50
Angelesm50

Reputation: 91

I had the same problem but this way worked for me:

<Button sx={{ "& .MuiButton-startIcon": { marginRight: "0px" }}} startIcon={settings_slider}>All Filters</Button>

And your question solved my problem at the same time.

Upvotes: 9

Dharmik Patel
Dharmik Patel

Reputation: 1201

If you are trying to change it using material UI it might not work. I don't know why but you can use inline styles it works and I've tried it.

Here is one example.

   <Button style={{marginRight: 20}} variant="outlined" startIcon={<DeleteIcon />}>

Sorry if this isn't the solution you are looking for.

Upvotes: 0

Related Questions