Fix ion-icon to a button’s right corner

Jorge Vergara pointing at a target showing an arrow in the bullseye

When you use the slot="end" in a button icon, the icon is placed to the right side of the button text.

So doing this:

<ion-button expand="block">
  GO
  <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button>

Renders the button and the icon close to each other

Ionic page with a button with the word GO and an arrow icon

I recently had a requirement to space them out so that the text was to the far left and the icon to the far right, as shown in the image below

Ionic page with a button with the word GO to the left and an arrow icon on the right

Spent some time trying to access the shadow DOM to change the internals of the button without luck, when the solution was as simple as adding a margin to the icon:

So the HTML is still the same, I add a class to the icon to differentiate it in case there are more:

<ion-button expand="block">
  GO
  <ion-icon class="spaced-icon" slot="end" name="arrow-forward"></ion-icon>
</ion-button>

And then in the css:

.spaced-icon {
  margin-left: auto;
}

And that’s it, with the margin-left: auto I got the button working as required.