如何将图标放在 Angular Material 的占位符中? [英] How to put icon in placeholder in Angular Material?

问题描述

我正在尝试将图标放在占位符中.我试过这个代码:

I'm trying to put icon in placeholder. I tried this code:

<md-input name="name">
   <md-placeholder>
      <i class="material-icons app-input-icon">face</i> Name
   </md-placeholder>
</md-input>

在我重新安装角度材料并更新角度 cli 之前，它正在工作(显示带有占位符的图标).对于此代码，浏览器现在给出此错误:'md-input' 不是已知元素".

It was working (was showing icon with placeholder) before I reinstalled angular material and updated the angular cli. For this code browser is giving this error now: "'md-input' is not a known element".

然后我尝试了这个代码:

then I tried this code:

 <md-input-container>
    <input mdInput placeholder="Name" name="name2">
 </md-input-container>

它工作正常，但如何在其占位符中放置人脸"图标?

It is working properly but How can I put 'face' icon in its placeholder ?

推荐答案

您的问题不是 md-placeholder 标签.就像错误所说的那样，不推荐使用的是 md-input .Angular Material 最近将他的 md-input 标签改成了 mdInput 指令.

Your problem was not the md-placeholder tag. Just like the error said, it was md-input which was deprecated. Angular Material recently changed his md-input tag into a mdInput directive.

但 md 占位符仍在工作(不确定它是否会持续).

But the md-placeholder is still working (not sure if it will last though).

下面的代码应该可以工作:

The following code should work then :

<md-input-container>
    <md-placeholder>
        <md-icon>face</md-icon> Name
    </md-placeholder>
    <input mdInput name="name">
</md-input-container>

另一种方法是对 md-icon 标签使用 mdPrefix 或 mdSuffix 指令.这将在您输入的左侧或右侧显示您的图标，但当您点击它时它不会跟随占位符.

An alternative is to use the mdPrefix or mdSuffix directives to your md-icon tag. That will display your icon on the left or right of your input, but it won't follow the placeholder when you click on it.

示例:

<md-input-container>
    <md-icon mdPrefix>face</md-icon>
    <input mdInput placeholder="Name" name="name">
</md-input-container>

查看 API 参考以了解更多信息.

这篇关于如何将图标放在 Angular Material 的占位符中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！