Поиск ввода с иконкой перед текстом заполнителя - Дизайн материала

Question

Код ниже. В настоящее время текст заполнителя перекрывает значок. Мне нужен заполнитель текста с отступом справа от значка. Возможно, есть лучший способ включить значок и текст-заполнитель в элемент matInput?

<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>

Answer 1

Вы можете использовать matPrefix.

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

Доступны matPrefix и matSuffix:

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