如何使用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代码...

演示

我写了很多CSS，但我无法做到这一点，请帮助我继续前进...

- its me

---

已添加了一些 CSS，您现在可以检查更新后的 StackBlitz。图标和文本在同一行。https://stackblitz.com/edit/angular-jd2l6y-rmdqfx?file=styles.css - Hrishikesh Kale

需要帮忙。如果用户开始输入，我需要隐藏占位符，我该怎么做？ - its me

Answer 1

其他答案为什么这么复杂呢？只需在mat-button中使用matPrefix 或 matSuffix即可（已测试针对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

---

它也可以直接用于mat-icon上。 - Navneet Srivastava

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

希望这样可以解决问题。

- LIJIN SAMUEL

---

我不会在fiddle中包含任何内容，只包括matPrefix。 - LIJIN SAMUEL

我只添加了这个 matPrefix，但它并不完美，你能检查一下那个 fiddle 吗？ - its me

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

- Hiren Vaghasiya