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

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，但我无法帮助我继续前进..

原文由 its me 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不知道为什么其他答案如此复杂。只需使用 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>

原文由 dasfdsa 发布，翻译遵循 CC BY-SA 4.0 许可协议