I have a search field on my webpage with an icon inside it. I managed to find some sample code for the icon.
https://i.sstatic.net/WUOot.png
However, I am struggling to position the icon to the right of the search box. I've tried adjusting the styling but haven't been successful in moving the icon to the desired location.
Can someone assist me with this issue?
Below is my current code:
<mat-form-field class="search">
<div class="icon-div">
<span class="fa fa-search"></span>
</div>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search office">
</mat-form-field>
And here is my style file:
.search {
position: center;
text-align: center;
}
.search input {
text-indent: 4px;
}
.search .fa-search {
position: absolute;
top: 4px;
left: 0px;
font-size: 20px;
text-align: right;
}
.icon-div {
padding-top: 4px;
}