Search input with icon before placeholder text - Material Design

Question

Code is below. Currently the placeholder text overlaps the icon. I need the placeholder text indented to the right of the icon. Perhaps there is a better way to include an icon and placeholder text in a matInput element?

<mat-form-field>
    <mat-icon fontSet="myfont"
        fontIcon="my-icon-search"
        class="search-icon"></mat-icon>
    <input id="app_search_input"
        matInput
        type="search"
        placeholder="{{'common.search' | translate}}"
        class="search-input">
</mat-form-field>

Yolande

Done. Thx. I had already tagged material-design. Added angular – Yolande

Answer 1

You can use matPrefix.

<mat-form-field>
    <mat-icon matPrefix>search</mat-icon>
    <input matInput type="search" placeholder="search here" class="search-input">
</mat-form-field>

Both matPrefix and matSuffix are available:

https://stackblitz.com/angular/byemgpqqxdx?file=app%2Finput-prefix-suffix-example.ts

Wylie

why your stackblitz example does not contain class="search-input". Already angular material has that example isnt? – Hedwig