javascript - 将图标添加到 Angular Material 输入

Question

我正尝试在 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>

当我试图用我们可以在那里看到的图标重现示例时:http://codepen.io/anon/pen/rOxMdR , 我有风格问题，没有任何东西能正常工作。

知道如何简单地将搜索图标添加到我现有的输入吗？

Answer 1

当你使用 angular-material-design和 font-awesome-icon使用 <md-icon>作为 md-font-icon 的元素属性。

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

工作 plunker

改变这个:

<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>

收件人:

<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>