如何将图标放在 Angular Material 中的占位符中？

Question

我正在尝试将图标放在占位符中。我试过这段代码：

<md-input name="name">
   <md-placeholder>
      <i class="material-icons app-input-icon">face</i> Name
   </md-placeholder>
</md-input>

在我重新安装 angular material 并更新 angular cli 之前，它正在运行（显示带有占位符的图标）。对于此代码，浏览器现在给出此错误：“'md-input' 不是已知元素”。

然后我尝试了这个代码：

 <md-input-container>
    <input mdInput placeholder="Name" name="name2">
 </md-input-container>

它工作正常，但如何将 'face' 图标放在其占位符中？

Answer 1

您的问题不是 md-placeholder 标签。就像错误所说的那样，md-input 已被弃用。 Angular Material 最近将他的 md-input 标签更改为 mdInput 指令。

但是 md-placeholder 仍在工作（不确定它是否会持续）。

下面的代码应该可以工作了：

<md-input-container>
    <md-placeholder>
        <md-icon>face</md-icon> Name
    </md-placeholder>
    <input mdInput name="name">
</md-input-container>

另一种方法是对您的 md-icon 标签使用 mdPrefix 或 mdSuffix 指令。这将在您输入的左侧或右侧显示您的图标，但当您单击它时它不会跟随占位符。

示例：

<md-input-container>
    <md-icon mdPrefix>face</md-icon>
    <input mdInput placeholder="Name" name="name">
</md-input-container>

Check the API reference for more informations.

Answer 2

mat-suffix 对我也不起作用。跟上他们的文档总是一件苦差事，但从 5.1.1 开始，这应该可行：

<mat-form-field class="example-form-field">
  <input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
  <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

来源： "Input with a clear button" 此处示例：https://material.angular.io/components/input/examples

Answer 3

<div>
    <mat-toolbar class="table-search">
        <span class="fileter-width"><mat-form-field>
                    <input matInput [(ngModel)] = "value"  placeholder="Search">
                    <button mat-button class="remove-search" matSuffix  mat-icon-button aria-label="Clear" (click) = "value=''">
                        <i class="fa fa-remove"> </i>
                    </button>
                </mat-form-field></span>
    </mat-toolbar>
</div>

Answer 4

Angular 6

.example-full-width {
  width: 100%;
}
<mat-form-field  class="example-full-width">
 <mat-icon matPrefix>email</mat-icon>
  <input matInput
   type="email"
   tabindex="1"
   placeholder="Your Email"
   formControlName="email">
</mat-form-field>

如何将图标放在 Angular Material 中的占位符中？

How to put icon in placeholder in Angular Material?

angular-material2

angular

Angular 6