How can i make icon and placeholder in same line using material?

问题

I want to make icon and search field should be in same line .

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

Above i added my html code ..

demo

i wrote lot of css but i could't get this help me out to move forward..

回答1:

Not sure why other answers are so complicated. Just use matPrefix or matSuffix with mat-button (tested for 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>

回答2:

Try this,

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

Just included matPrefix to mat-icon.

Hope this will solve the issue.

回答3:

Apply this css it will align both in line

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

来源：https://stackoverflow.com/questions/48494503/how-can-i-make-icon-and-placeholder-in-same-line-using-material