在占位符文本之前使用图标搜索输入 - Material Design

Posted 2023-03-05

【中文标题】在占位符文本之前使用图标搜索输入 - Material Design

【英文标题】：Search input with icon before placeholder text - Material Design

【发布时间】：2018-10-07 10:42:48

【问题描述】：

代码如下。目前占位符文本与图标重叠。我需要缩进到图标右侧的占位符文本。也许有更好的方法在 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>

【问题讨论】：

完成。谢谢。我已经标记了材料设计。添加角度

【参考方案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

【讨论】：

为什么您的 stackblitz 示例不包含 class="search-input"。已经有角材料有那个例子不是吗？