Ionic-framework: bug: ion-icon not centered in ion-item

[marcjulian]

Bug Report

Ionic version:


[x] 4.5.0 and 4.6.0

Current behavior:

ion-icon is not centered in the item:

Expected behavior:

ion-icon is centered in the item:

It still works correctly in version 4.4.2

Steps to reproduce:

Create an ion-item with a ion-label, ion-input and ion-icon slotted to the end.

Related code:

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password"></ion-input>
  <ion-icon slot="end" name="eye"></ion-icon>
</ion-item>

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.1.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

[liamdebeasi]

Thanks for the issue! I am able to reproduce this issue: https://codepen.io/liamdebeasi/pen/BgrzdJ.

We will look into this! cc @brandyscarney

[brandyscarney]

Thanks! This is caused by an increase in the item height due to matching the spec and the ion-icon having a set margin. It can be fixed by adding the following to the icon:

align-self: center;

[marcjulian]

Thanks for looking into this issue. Awesome that you already found a solution.

[ben-kn-app]

@brandyscarney align-self works. Unfortunately, the detail-arrow inside an ion-item is also aligned wrongly in this use-case.

Is there a way to add align-self: center; to the .item-detail-icon? (as it is within shadow-root)?
Or is it possible to add align-self to the detail arrow of the ionic4 source code, or does it break something else?

This can be reproduced using the codepen of Liam (above) and adding attribute 'detail' to the ion-item element. (But you probably already knew this)