Align icon with ion-label on ion-input iOS

Ionic Framework
1

I don’t understand why my ion-icon not aligning with the floating ion-label on iOS

Screenshot_2019-07-30%20Ionic%20Lab(2)

is there a way to make it looks like the android version?

Screenshot_2019-07-30%20Ionic%20Lab(3)

here is my form


        <form>
          <ion-item>
            <ion-label position="floating">Email</ion-label>
            <ion-input ngModel type="email" name="email"></ion-input>
            <ion-icon name="mail" slot="start"></ion-icon>
          </ion-item>

          <ion-item>
            <ion-label position="floating">Password</ion-label>
            <ion-input ngModel type="password" name="password"></ion-input>
            <ion-icon name="lock" slot="start"></ion-icon>
          </ion-item>

          <ion-button type="submit" expand="block" color="danger" class="ion-text-uppercase ion-margin-top">Login
          </ion-button>
        </form>
2

Can you share the code you use for layout?

3

question updated with code.

4 
<form>
          <ion-item>
            <ion-label position="floating">Email</ion-label>
            <ion-input ngModel type="email" name="email"></ion-input>
            <ion-icon name="mail" slot="start"></ion-icon>
          </ion-item>

          <ion-item>
            <ion-label position="floating">Password</ion-label>
            <ion-input ngModel type="password" name="password"></ion-input>
            <ion-icon name="lock" slot="start"></ion-icon>
          </ion-item>

          <ion-button type="submit" expand="block" color="danger" class="ion-text-uppercase ion-margin-top">Login
          </ion-button>
        </form>
5

Hey there! This is actually done on purpose.

With iOS’s design guidelines, icons are aligned to the top of an item. For Android/Material Design, icons are centered vertically regardless.

If you want to align the icons to the center, you can just use the ion-align-self-center class from the css utils.

https://codepen.io/mhartington/pen/aeVeXv

6 Likes
6

Thank you for the explanation