如何使用材质在同一行中制作图标和占位符？

Question

我要使图标和搜索字段在同一行。

<div class="example-header">
    <mat-form-field>
      <mat-icon>search</mat-icon>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

上面我添加了我的HTML代码..

演示

我写了很多css，但是我无法获得帮助。

Answer 1

尝试这个，

 <div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>      
     <input matInput (keyup)="applyFilter($event.target.value)" 
      placeholder="Filter">
    <mat-icon matPrefix>search</mat-icon>
  </mat-form-field>
 </div>
</div>

刚刚将 matPrefix 包含到 mat-icon 中。

希望这能解决问题。

Answer 2

不知道为什么其他答案这么复杂。只需使用matPrefix 或matSuffix与mat-button（经过Angular-material v7测试）。

直接来自文档：

<mat-form-field>
  <input matInput type="text" placeholder="Search">
  <button mat-button matPrefix mat-icon-button>
    <mat-icon>search</mat-icon>
  </button>
</mat-form-field>


<mat-form-field>
  <input matInput type="text" placeholder="Clearable input">
  <button mat-button *ngIf="value" matSuffix mat-icon-button>
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>