hinzufügen Symbol Winkelmaterialeinsatz

Question

Ich versuche, ein Suchsymbol auf meine Eingabe Suchleiste aus Angular Material hinzuzufügen:

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

Wenn ich versuche, das Beispiel mit Symbolen zu reproduzieren, die wir dort sehen können: , ich habe Probleme mit dem Stil und nichts funktioniert einwandfrei.

Irgendeine Idee, wie ich einfach ein Suchsymbol zu meiner vorhandenen Eingabe hinzufügen könnte?

Answer 1

Wie Sie angular-material-design und font-awesome-icon verwenden <md-icon> als Element mit md-font-icon Attribute verwenden.

Und class="md-icon-float" mit md-inout-container verwenden.

Arbeiten plunker

ändern diese:

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

An:

<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

Diese Frage ist sehr alt, aber ich lief nur in das gleiche Problem heute Morgen und die Antwort von @gaurav funktionierte nicht wie das, was das OP in diesem Link suchte: https://material.angularjs.org/latest/#/demo/material.components.input

Wenn Sie die Chrome-Entwicklerkonsole öffnen, können Sie das Element überprüfen und feststellen, dass die Verfasser des Democodes eine benutzerdefinierte Klasse für das Symbolverhalten der E-Mail-Eingabe im unteren Symbolbereich verwenden. Ich kopierte dieses Verhalten im Wesentlichen, um den gleichen gewünschten Effekt zu erzielen.

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

Eine Sache zu beachten ist, dass ich die Klasse "md-icon-links" zu meinen md-Container oder die Symbole würde hinzufügen hatte stapelt auf den Eingang. Ich verwende eckiges Material v1.1.0 und angular js v1.5.5 in meinem Projekt. Ich hoffe, dass diese Antworten jedem helfen, der das gleiche Verhalten wie in der Angular-Material-Demo erreichen möchte.