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>

Check the API reference for more informations.

Answer 2

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>

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

来源：＆＃34;输入一个清除按钮＆＃34;例如：https://material.angular.io/components/input/examples

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

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

4 个答案:

Angular 6