在占位符文本之前使用图标搜索输入 - 材料设计

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/input-prefix-suffix-suffix-example.ts