After searching for a cross-browser search control with a clear button similar to HTML5, I found the solution rendered by Chrome:
<input type="search>The code that gave me the most relevant results can be found here. I used the standard sample with "no appearance" to avoid extra styles that are not needed:
https://i.stack.imgur.com/JA29Q.png<mat-form-field class="example-form-field" appearance="none">
<input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>However, the clear button may float up and down in different cases:
https://i.stack.imgur.com/pvZ9Y.png
Just to clarify, this is not a search for a library, book, or tutorial!