angular-material - 垫子图标 float 在输入的右侧，并且不与键入的文本居中

Question

我尝试使用 Angular Material 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;

这是一个堆栈 Blitz :

https://stackblitz.com/edit/mat-icons-abevly

我希望图标位于输入的开头并以键入的文本居中。我尝试了 matSuffix 但它给出了相同的结果

Answer 1

您可以通过切换到中心 Flex 容器 (mat-form-field-flex) 并删除输入/选择上的填充 (mat-form-field-infix) 来覆盖 scss。请参阅下面的示例:

::ng-deep {
    mat-form-field {
        span[matprefix] {
            color: #828182;
            margin: 0.4rem;
        }

        div.mat-form-field-flex {
            align-items: center !important;
        }
        div.mat-form-field-infix {
            padding: 0 !important;
            border-top: 0 !important;
        }
        div.mat-form-field-wrapper {
            padding-bottom: 0.5em;
        }
    }
}