css - 如何使用 Material 在同一行中制作图标和占位符？

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

demo

我写了很多CSS，但我无法得到这个
帮助我前进..

Answer 1

不知道为什么其他答案如此复杂。只需使用 matPrefix或 matSuffix与 mat-button (针对 Angular-material v7 进行了测试)。

Straight from docs:

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