Angular material Mat图标浮动在输入的右侧，不以键入的文本为中心 我试图用角素材6图标在输入文本框的开头添加一个图标，但是它看起来是在输入的右边和中间，而不是以类型化的文本为中心。

这是我的html脚本：

<mat-form-field appearance="outline" class="example-full-width" color="warn">
   <mat-label>Username</mat-label>
   <mat-icon matPrefix color="warn">user_group</mat-icon>
   <input matInput id="login-username" formControlName="username" type="text" class="form-control" name="username"
          placeholder="username or email">
</mat-form-field>&nbsp;

用户名
用户组

下面是一场闪电战：

---

我希望图标位于输入的开头，并以键入的文本为中心。我尝试了

matSuffix

，但它给出了相同的结果

您的示例使用了角度/角度材质v5。在v5中，

MatPrefix

和

MatSuffix

指令的选择器是

MatPrefix

和

MatSuffix

仅-

MatPrefix

和

MatSuffix

直到v6才受支持。所以您使用了错误的指令选择器。尝试：

<mat-icon mat-prefix color="warn">user_group</mat-icon>

用户组

---

或者切换到v6+。

您可以通过切换到中心flex容器（mat form field flex）并删除输入/选择（mat form field infix）上的填充来覆盖SCS。请参见下面的示例：

：：ng deep{
垫形场{
span[matprefix]{
颜色：828182；
保证金：0.4雷姆；
}
分区mat-form-field-flex{
对齐项目：居中！重要；
}
div.mat-form-field-infix{
填充：0！重要；
边框顶部：0！重要；
}
div.mat-form-field-wrapper{
垫底：0.5em；
}
}
}

“@angular/material”：“^6.3.3”，

json文件中显示的我的angular material版本是v6，这不是Stackblitz示例使用的版本。您的Stackblitz示例也有很多其他问题-修复所有这些问题，然后查看是否存在相同的对齐问题。当我们调试的内容与您的实际问题不同时，无法帮助您调试！