Aggiungi icona per inserire materiale angolare

Question

Sto cercando di aggiungere un'icona di ricerca per il mio ingresso barra di ricerca di 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> 

Quando sto cercando di riprodurre l'esempio con icone che possiamo vedere lì: http://codepen.io/anon/pen/rOxMdR, sto avendo problemi di stile e niente funziona correttamente.

Qualche idea su come aggiungere semplicemente un'icona di ricerca al mio input esistente?

Answer 1

Poiché si utilizza angular-material-design e font-awesome-icon utilizzare <md-icon> come elemento con attributo md-font-icon.

E utilizzare class="md-icon-float" con md-inout-container.

Lavorare plunker

Modifica questo:

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

A:

<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

Questa domanda è molto vecchio, ma ho appena incontrato lo stesso problema questa mattina e la risposta da @gaurav non ha funzionato come quello che l'OP cercava in questo link: https://material.angularjs.org/latest/#/demo/material.components.input

Se apri la console degli sviluppatori di Chrome, puoi controllare l'elemento e vedere che i ragazzi che hanno scritto il codice demo utilizzano una classe personalizzata per il comportamento dell'icona dell'ingresso dell'email nella sezione inferiore delle icone. In sostanza ho copiato questo comportamento per ottenere lo stesso effetto desiderato.

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

Una cosa da notare è che ho dovuto aggiungere la classe "md-icon-sinistra" al mio md-contenitore o le icone sarebbero impilare sopra l'input. Sto usando il materiale angolare v1.1.0 e angular js v1.5.5 nel mio progetto. Spero che questa risposta aiuti qualcun altro a cercare di ottenere lo stesso comportamento della demo di Angular Material.