ion-icons not being aligned correctly in label and button

[mpanneck]

Bug Report

Ionic version:

[x] 4.2.0

Current behavior:

When using ion-icon inside a button or label, text and icon are not aligned correctly.

Expected behavior:

Icon and text should be aligned.

Steps to reproduce:

Related code:

<ion-header>
 <ion-toolbar>
 <ion-title>Anmeldung</ion-title>
 </ion-toolbar>
</ion-header>
<ion-content>
 <ion-item>
 <ion-label position="floating"><ion-icon name="person"></ion-icon> Benutzername</ion-label>
 <ion-input></ion-input>
 </ion-item>
 <ion-item>
 <ion-label position="floating"><ion-icon name="lock"></ion-icon> Passwort</ion-label>
 <ion-input></ion-input>
 </ion-item>
 <ion-item>
 <ion-label position="floating"><ion-icon name="globe"></ion-icon> Server</ion-label>
 <ion-input></ion-input>
 </ion-item>
 <ion-button expand="block" class="ion-margin-top">
 <ion-icon slot="start" name="star"></ion-icon> Anmelden
 </ion-button>
</ion-content>

results in

Other information:

Ionic info:

Ionic:

 ionic (Ionic CLI) : 4.12.0 (C:\Users\mpanneck\AppData\Roaming\npm\node_modules\ionic)
 Ionic Framework : @ionic/angular 4.2.0
 @angular-devkit/build-angular : 0.13.8
 @angular-devkit/schematics : 7.2.4
 @angular/cli : 7.3.8
 @ionic/angular-toolkit : 1.4.1

Capacitor:

 capacitor (Capacitor CLI) : 1.0.0-beta.19
 @capacitor/core : 1.0.0-beta.19

System:

 NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
 npm : 6.9.0
 OS : Windows 10

[liamdebeasi]

Hi there,

Thanks for the issue! Would you say this is the same as #16422?

Thanks!

[mpanneck]

It looks similar but has a little difference:
In my example I've included the icons inside the labels. This is necessary because I want to use floating labels. So the icons should float as well.

Besides in #16422 no buttons are mentioned.

[brandyscarney]

Thanks for the issue! Here's a workaround for this: https://codepen.io/brandyscarney/pen/WWXrLg?editors=1100

[RyanPaiva56]

@brandyscarney should we be doing that globally or will that create issues? Not recommended?

Edit: this issue exists anywhere you put the icon outside of an item. Headings (h1 h2), ion-text, etc.

Edit 2: yeeah that fix breaks all kinds of things. For now this is my global fix:

h1, h2, h3, h4, h5 {
 ion-icon {
 vertical-align: middle;
 padding-bottom: 3px;
 }
}

ion-label {
 ion-icon {
 margin-bottom: -3px;
 }
}

[troygilbert]

I'm encountering this as well, and it's not related to ion-label, it occurs with an ion-item and any textual content (I want the ion-icon to flow as part of the text). The fix above kinda fixes it, but the padding-bottom has to be adjusted based on the text size or icon. Feels wrong!