Geek Answers Handbook

How can I make the icon and placeholder on the same line using material?

I want the icon and the search box to be on the 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 a lot of css, but I could not get it help me move forward ..

0
source share
4 answers

some CSS has been added, now you can check the updated stackblitz. icon and text are on the same line.

https://stackblitz.com/edit/angular-jd2l6y-rmdqfx?file=styles.css

+1
source

Try it,

  <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 in mat-icon.

Hope this solves the problem.

+2
source

Apply this css, it will align in line

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

Not sure if the other answers are so complicated. Just use matPrefix or matSuffix with mat-button (tested on Angular-material v7).

Directly from the 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>
0
source

More articles:


All Articles