CODEWITHSUNDEEP
cssangularangular-materialangular-material2
its me
its me

Reputation: 542

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

Upvotes: 10

Views: 30298

Answers (3)

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

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>

Upvotes: 20

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

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

Upvotes: 1

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

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.

Upvotes: 7

Related Questions