Добавить иконку в угловой вход материала

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> 

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> 

Answer 2

Этот вопрос очень старый, но я просто столкнулся с той же проблемой сегодня утром, и ответ от @gaurav не работает так же, как OP, который ищет по этой ссылке: https://material.angularjs.org/latest/#/demo/material.components.input

Если вы открываете консоль разработчика Chrome, вы можете проверить элемент и посмотреть, что ребята, которые написали демо-код, используют пользовательский класс для поведения значков ввода электронной почты в нижней значке. Я, по сути, скопировал это поведение для достижения такого же желаемого эффекта.

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:

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

Одна вещь, чтобы отметить, что я должен был добавить класс "мкр-значок налево" на мой мкр-контейнер или иконки будет стек поверх ввода. Я использую угловой материал v1.1.0 и угловой js v1.5.5 в своем проекте. Надеюсь, что это поможет всем, кто хочет достичь такого же поведения, как в демо-версии Angular Material.