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

Question

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

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

它工作正常,但如何在其占位符中添加"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>

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

示例:

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

检查API参考以获取更多信息.

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