Reputation: 542
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 ..
i wrote lot of css but i could't get this help me out to move forward..
Upvotes: 10
Views: 30298
Reputation: 7250
Not sure why other answers are so complicated. Just use matPrefix
or matSuffix
with mat-button
(tested for 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>
Upvotes: 20
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
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