Angular 如何将角度材质输入文本与图标对齐？

我正在使用

Angular

开发一个

Ionic

应用程序，我的

matInput

右侧有一个

ionicon图标，但它们没有对齐

我认为问题在于文本在输入中没有垂直居中

这是我的密码

HTML

我怎样才能解决这个问题

<ion-item class="item-login">
                <mat-form-field style="vertical-align: middle;">
                    <mat-label>Login</mat-label>
                    <input matInput type="text" placeholder="Entrez votre login ou trigrame" name="email"
                        [(ngModel)]="registerCredentials.email" required />
                    <ion-icon ios="ios-person" md="md-person"></ion-icon>
                </mat-form-field>
            </ion-item>

.item-login.item.item-block.item-md {
    justify-content: center;
    align-items: center;
 }
 
 .mat-form-field-empty.mat-form-field-label {
    color: rgba(255, 255, 255, 1);
    font-family: "roboto-regular";
    font-size: 13px;
    margin: 0px 0px 0px 0px;
 }

 input.mat-input-element {
   min-height: 25px;
   height: auto;
 }

 .mat-form-field-infix {
    display: flex !important;

    vertical-align: middle;
   .ion-md-lock:before,
   .ion-ios-lock:before {
      content: url("../assets/img/lock.png");
   }

  .ion-md-person:before,
  .ion-ios-person:before {
    content: url("../assets/img/person.png");
   }
 }