Javascript 将图标添加到角度材料输入

Add icon to angular material input

提问by Ellone

I am trying to add a search icon to my input search bar out of Angular Material:

我正在尝试从Angular Material 中向我的输入搜索栏添加一个搜索图标：

<aside class="main-sidebar">
    <section class="sidebar control-sidebar-dark" id="leftMenu">
        <div>
            <!--  need to disable overflow-x somehow cuz of menu -->
            <md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true" md-selected="selectedIndex">

                <md-tab label="<i class='fa fa-search'></i>" ng-if="handleResize()" search-Focus>
                    <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}">
                        <!-- search Menu -->
                        <div>
                            <div>
                                <form action="javascript:void(0)" method="get" class="sidebar-form" id="searchForm">
                                    <div>
                                    <md-content md-theme="docs-dark">
                                        <md-input-container style="padding-bottom: 5px;">
                                            <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
                                            <input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
                                        </md-input-container>
                                    </md-content>
                                    </div>

                                </form>
                                <div>

When I'm trying to reproduce the example with icons that we can see there : http://codepen.io/anon/pen/rOxMdR, I'm having style issues and nothing works properly.

当我尝试使用我们可以在那里看到的图标重现示例时：http: //codepen.io/anon/pen/rOxMdR，我遇到了样式问题并且没有任何工作正常。

Any idea how I could simply add a search icon to my existing input ?

知道如何简单地向现有输入添加搜索图标吗？

回答by gaurav bhavsar

As you are using angular-material-designand font-awesome-iconuse <md-icon>as element with md-font-iconattribute.

当你正在使用angular-material-design，并font-awesome-icon使用<md-icon>与元素md-font-icon属性。

And use class="md-icon-float"with md-inout-container.

并class="md-icon-float"与md-inout-container.

Working plunker

工作笨蛋

Change this :

改变这一点：

<md-content md-theme="docs-dark">
    <md-input-container style="padding-bottom: 5px;">
        <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
        <input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
    </md-input-container>
</md-content>

To :

到 ：

<md-content md-theme="docs-dark">
    <md-input-container class="md-icon-float">
        <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
        <md-icon md-font-icon="fa fa-search"></md-icon>
        <input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
    </md-input-container>
</md-content>

回答by jsternadel

This question is very old but I just ran into the same issue this morning and the answer from @gaurav didn't work the same as what the OP was looking for in this link: https://material.angularjs.org/latest/#/demo/material.components.input

这个问题很老了，但我今天早上遇到了同样的问题，@gaurav 的答案与 OP 在此链接中寻找的内容不同：https://material.angularjs.org/latest/ #/demo/material.components.input

If you open the Chrome developer console you can inspect the element and see that the guys who wrote the demo code are using a custom class for the icon behavior of the email input in the bottom icons section. I essentially copied that behavior to achieve the same desired effect.

如果您打开 Chrome 开发人员控制台，您可以检查该元素，并看到编写演示代码的人正在使用自定义类来处理底部图标部分中电子邮件输入的图标行为。我基本上复制了该行为以达到相同的预期效果。

HTML:

HTML：

<md-input-container class="md-block md-icon-left">
    <md-icon class="form-icon">lock_outline</md-icon>
    <label>Password</label>
    <input 
        type="password" ng-model="user.password" name="password" 
        ng-required="true" 
        ng-keyup="$event.keyCode == 13 && loginForm.$valid && login()"/>
</md-input-container>

CSS:

CSS：

/* Angular extension */
md-input-container.md-input-invalid > md-icon.form-icon {
  color: #B71C1C;
}

One thing to note is that I had to add the class "md-icon-left" to my md-container or the icons would stack on top of the input. I am using angular material v1.1.0 and angular js v1.5.5 in my project. I hope this answers helps anyone else looking to achieve the same behavior as in the Angular Material demo.

需要注意的一件事是，我必须将类“md-icon-left”添加到我的 md-container 中，否则图标将堆叠在输入的顶部。我在我的项目中使用了 angular material v1.1.0 和 angular js v1.5.5。我希望这个答案可以帮助其他任何希望实现与 Angular Material 演示中相同行为的人。