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!

[brandyscarney]

Hello! We have revisited this issue with the latest version of Ionic Framework (v7) and have found the following:

The button alignment has been resolved since this issue was created. Below is a comparison between the button from the image in this issue and a button using the latest version of Ionic Framework:

---

The label alignment is a bit trickier. Due to the fact that ion-label is used in many components & different scenarios, we cannot add the CSS I originally included as a workaround. For example, adding display: flex to ion-label causes the following markup in an ion-label to render horizontally:

display: block	display: flex

The above could be solved by applying flex-direction: column, but that would result in breaking the markup in this issue:

flex-direction: row (initial value)	flex-direction: column

In addition, adding an icon inside of a floating label does not align with the Material Design Guidelines. In both Material Design 2 (released in 2018) and Material Design 3 (released in 2021) the leading icon does not float with the text.

Material Design 2	Material Design 3

---

As a result of the above, we have decided not to change the styling on the ion-label element as adding the required styling to solve this issue would break other use cases. Any custom styles should be added by the app developer. To achieve the UI requested in the original issue, a label slot can be used with the modern syntax (note that v7.1.0 or later is required for this to work):

<ion-item>
  <ion-input label-placement="floating">
    <div slot="label" style="display: flex; align-items: center;">
      <ion-icon name="person" style="margin-right: 6px;"></ion-icon>
      Benutzername
    </div>
  </ion-input>
</ion-item>
<ion-item>
  <ion-input label-placement="floating">
    <div slot="label" style="display: flex; align-items: center;">
      <ion-icon name="lock-closed" style="margin-right: 6px;"></ion-icon>
      Passwort
    </div>
  </ion-input>
</ion-item>
<ion-item>
  <ion-input label-placement="floating">
    <div slot="label" style="display: flex; align-items: center;">
      <ion-icon name="globe" style="margin-right: 6px;"></ion-icon>
      Server
    </div>
  </ion-input>
</ion-item>

---

However, if you intend to match Material Design Guidelines, which we recommend, we are working on adding start and end slots to input to support icons in an input.

If anyone is running into other alignment issues please create a new issue, thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.