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;
}