Float button icon left?

Ionic Framework
1

Hey folks!

Using ionic 4, I have an ion-button with an icon:

<ion-button expand="block" color="dark">
     <ion-icon slot="start" name="help"></ion-icon>
     Frequently Asked Questions
</ion-button>

It looks like this:

28%20PM

Does anyone know if there is an “ionic way” to float the icon all the way to the left of the button, but keep the text centered?

Thanks for your help!

PS: I tried adding float-left to the ion-icon element, but no luck.

<ion-icon slot="start" name="help" float-left></ion-icon>
2

So there is no out of the box solution for this. Since ion-button uses flex, you can either use margin to set the icon and text (wrapped in a span) or position the icon absolutely in the button.

Using Margin

<ion-button expand="block" class="flex-margin">
  <ion-icon slot="start" name="star"></ion-icon>
  <span>Left Icon Flex</span>
</ion-button>

.flex-margin ion-icon,
.flex-margin span {
  margin-right: auto;
}

Using Absolute Positioning

<ion-button expand="block">
  <ion-icon slot="start" name="star" class="absolute-icon"></ion-icon>
  Left Icon Absolute
</ion-button>

.absolute-icon {
  position: absolute;
  left: var(--padding-start);
}

Here is a codepen example: https://codepen.io/brandyscarney/pen/bOpBVm

5 Likes
3

I went with your first solution - it worked very nicely :slight_smile: thank you very much for your help!!