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!