如何使用素材将图标和占位符放在同一行？

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

不确定其他答案为何如此复杂。只需将/#!/route...或/scripts/lol.js与matPrefix（经Angular-material v7测试）一起使用。

Straight from docs:

matSuffix

Answer 2

试试这个，

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

应用此css，它将在行中对齐

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