Ionic4垂直对齐离子输入内部的离子项目

Question

在ionic 4项目中，我需要制定如下形式。

输入字段的

图标必须如上图所示垂直居中。 但是在我的实现中，它们并没有像我需要的那样居中。

这是我的实现方式

<form [formGroup]="loginForm">
        <ion-list lines="none">
          <ion-item class="input-container" lines="none" align-items-center>
            <ion-icon class="custom-icon" name="mailgray" slot="start" no-padding></ion-icon>
            <ion-label position="floating" no-padding>Email</ion-label>
            <ion-input no-padding formControlName="email"></ion-input>
            <div class="email-pattern" slot="end">@company.edu</div>
          </ion-item>
          <ion-item class="input-container" lines="none">
            <ion-icon name="passwordgray" slot="start"></ion-icon>
            <ion-label position="floating">Password</ion-label>
            <ion-input type="password" formControlName="password"></ion-input>
            <ion-icon name="peye" slot="end"></ion-icon>

          </ion-item>
        </ion-list>
        <mat-checkbox formControlName="isRememberMe">Remember me</mat-checkbox>
        <ion-button class="btn-login" expand="block" [routerLink]="['/tabs/search']">Login</ion-button>
      </form>

scss

.login-form {
  --background: #fafafa;
  .title {
    font-size: 25px;
    --color: #1259a1;
  }
  .sub-title {
    margin-top: 10px;
    font-weight: 500;
  }

  .btn-login {
    --background: #e88233;
    border-radius: 4px;
  }

  .input-container {
    border: 1px solid #e8e8e8;
    --border-radius: 5px;
    --min-height:50px; 
    --highlight-color-focused :#1259a1;
    width: 100%;
    &:first-child {
      margin-bottom: 10px;
    }

    .email-pattern {
      color: #cccccc;
    }

    .custom-icon{
        width:16px;
        height: 16px;
    }
  }
}

我觉得ion-item存在问题。我尝试使用--min-height属性的50px设置高度。但这也没有适用。

我需要将离子输入项垂直对齐作为第一张图像。