如何将图标放置在占位符中的角度材料？
如何将图标放置在占位符中的角度材料？
提问于 2017-04-14 18:00:43
我想把图标放在占位符里。我试过这个代码：
<md-input name="name">
<md-placeholder>
<i class="material-icons app-input-icon">face</i> Name
</md-placeholder>
</md-input>在我重新安装角材料和更新角cli之前，它正在工作(用占位符显示图标)。对于这个代码，浏览器现在给出了这个错误：“‘md- not’不是一个已知的元素”。
然后我尝试了这个代码：
<md-input-container>
<input mdInput placeholder="Name" name="name2">
</md-input-container>它工作正常，但我如何在它的占位符中放置“face”图标？
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-04-15 01:57:59
你的问题不是md-占位符标签。就像错误说的那样，被否决的是md输入。角材料最近改变了他的md输入标签为mdInput指令。
但是md占位符仍然有效(不确定它是否会持续)。
那么，下面的代码应该可以工作：
<md-input-container>
<md-placeholder>
<md-icon>face</md-icon> Name
</md-placeholder>
<input mdInput name="name">
</md-input-container>另一种方法是对md图标标记使用mdPrefix或mdSuffix指令。这将显示您的图标在左或右的输入，但它不会跟随占位符，当你点击它。
例子：
<md-input-container>
<md-icon mdPrefix>face</md-icon>
<input mdInput placeholder="Name" name="name">
</md-input-container>Stack Overflow用户
发布于 2018-06-04 10:16:46
角6
.example-full-width {
width: 100%;
}
<mat-form-field class="example-full-width">
<mat-icon matPrefix>email</mat-icon>
<input matInput
type="email"
tabindex="1"
placeholder="Your Email"
formControlName="email">
</mat-form-field>Stack Overflow用户
发布于 2018-02-02 19:18:18
垫子后缀也不适合我。跟上他们的文档始终是一项繁重的工作，但从5.1.1开始，这应该是可行的：
<mat-form-field class="example-form-field">
<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>来源：“输入有一个清晰的按钮”示例：https://material.angular.io/components/input/examples
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43416783
复制相关文章
相似问题
腾讯云开发者
