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

【问题标题】：How to put icon in placeholder in Angular Material?如何将图标放在Angular Material的占位符中？
【发布时间】：2017-04-14 18:00:43
【问题描述】：

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

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

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

然后我尝试了这段代码：

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

它工作正常，但我怎样才能将“脸”图标放在它的占位符中？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

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

但 md 占位符仍在工作（但不确定它是否会持续）。

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

<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.

【讨论】：

嘿雷米。您收到任何错误消息吗？我刚刚用 Angular Material 2 (v.2.0.0-beta.6) 的最新版本做了一个 plunkr，它工作得很好。你可以在这里查看：plnkr.co/edit/XsmXJVgv5C91WniQfPAn?p=preview
我使用了 Angular 1.6.4 ^^。解决方案是将 class="md-icon-float md-icon-right" 添加到
mdPrefix，现在 matPrefix 示例适用于我的 mat-select。另一个打破了页面。 FWIW。
对于 Angular 5+ Material 2 使用后缀（无占位符）：<mat-form-field> <mat-icon mdSuffix>mode_edit</mat-icon> <input matInput placeholder="Name"> </mat-form-field>
前缀图标类似：<mat-form-field> <mat-label>Amount</mat-label> <input matInput placeholder="0.0"> <mat-icon matPrefix>attach_money</mat-icon> </mat-form-field>

【解决方案2】：

角度 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>

【讨论】：

【解决方案3】：

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>

来源：“使用清除按钮输入”示例：https://material.angular.io/components/input/examples

【讨论】：

【解决方案4】：

<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>

【讨论】：