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

我想使图标和搜索字段应该在同一行

<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，但我不能得到这个 帮我向前走。

试试这个

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

搜索

刚刚包括mat前缀到mat图标

---

希望这将解决问题。

应用此css，它将使两者对齐

.mat-form-field-label {
    top: 12px;
}
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{
  top:18px;
}

---

不知道为什么其他答案如此复杂。只需将

matPrefix

或

matSuffix

与

mat按钮一起使用即可（测试角度材料v7）



搜索
关闭
我不会在小提琴上放任何东西。刚刚包括matPrefix。我只添加了这个matPrefix，但它不是完美的。你可以检查Fiddle添加了一些CSS，你现在可以检查更新的stackblitz。图标和文本位于同一行。需要一个帮助。如果用户开始键入，我需要隐藏占位符。我如何才能做到这一点？它也可以直接用于垫子图标
<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>