To add a search icon to an input field in Angular, you can take the help of the matPrefix and matSuffix attributes. The matPrefix places the search icon at the starting of the input field while the matSuffix places the search icon at the end of the input field.
Let’s say you want to put the search icon at the end of the input. Then you can simply add the matSuffix attribute to the <mat-icon>. It will automatically move the search icon at the end of the input field:
<mat-form-field appearance="fill">
<mat-label>Search Something</mat-label>
<input type="text" matInput placeholder="Type something..">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
This will produce the following result:
Similarly, if you want to place the search icon at the beginning of the input field, you have to add the matPrefix attribute to the <mat-icon>.
This is how you can do it in your template file:
<mat-form-field appearance="fill">
<mat-label>Search Something</mat-label>
<mat-icon matPrefix>search</mat-icon>
<input type="text" matInput placeholder="Type something..">
</mat-form-field>
The above code will produce the following result:
