Adjust margins for slots in Ionic 4

I am trying to adjust the margin-inline-* for slots. The default? value of 32px seems to big.

For slot=“end” there is a rule for ::slotted([slot=end]) that puts the following

margin-inline-start: 32px;

I have tried to override the --ion-margin in variables.scss but that does not seem to work.

Any pointers would be great!

1 Like

Try with this

ion-icon[slot=start] {
  margin-inline-start: 20px;
}

ion-icon[slot=end] {
  margin-inline-start: 20px;
}

For me it was the list reorder icon that had too much space on the left, so I used:

ion-reorder[slot=end] {
  margin-inline-start: 12px;
}

Note, this is also valid for Ionic 5.

And consecutive buttons with slot=“end” have way too much space. This can be fixed by adding to variables.scss:

ion-button[slot=end] {
  margin-inline-start: 1px;
}