Ajouter une icône pour angulaire du matériel d'entrée

Je suis en train d'ajouter une icône de recherche à mon entrée barre de recherche de Angulaire Du Matériel :

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

Quand je suis en train de reproduire l'exemple avec des icônes que l'on peut y voir : http://codepen.io/anon/pen/rOxMdR , je vais avoir des problèmes de style et rien ne fonctionne correctement.

Aucune idée de comment je pourrais simplement ajouter une icône de recherche à mon entrée ?

l'endroit où vous souhaitez ajouter icon ? à l'intérieur de la forme ?
Eh bien, sur la gauche ou la droite de l'entrée de texte, de préférence à droite.
Vérifiez j'ai ajouté de travail plunker dans ma réponse.

OriginalL'auteur Ellone | 2015-09-14

  1. 3

    Que vous utilisez angular-material-design et font-awesome-icon utilisation <md-icon> comme élément avec md-font-icon attribut.

    Et l'utilisation class="md-icon-float" avec md-inout-container.

    De travail plunker

    Changer cela :

    <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>
    Oui j'ai essayé, mais, l'icône va de haut en taille réduite, tout comme l'espace réservé de l'entrée lorsque nous nous concentrons l'entrée. Vous pouvez voir l'espace réservé comportement là : material.angularjs.org/latest/#/demo/material.components.input
    avez-vous ajouté class="md-icône-float" ? comme ce <md-input-container class="md-icon-float">
    Eh bien, j'ai essayé ça aussi après votre travail d'édition, mais le problème est la hauteur du contenu devient trop gros, et j'ai une barre de défilement dans la saisie de contenu. Je voudrais avoir une ligne d'entrée avec une icône comme l'e-mail dans le dernier exemple, il y a : material.angularjs.org/latest/#/demo/material.components.input
    il n'y a pas de différence entre plunker l'exemple de saisie de courrier Électronique dans angulaires-le matériau du site. la différence n'est que l'Email n'a pas d'étiquette, mais avoir un espace réservé. - Je mettre à jour Plunker de nouveau.
    Oui mais la mienne reçoit une barre de défilement, c'est probablement à cause de l'un de ses parents : côté > section > md onglets-> md-tab > md-contenu > > md-contenu > md-entrée container-> input

    OriginalL'auteur gaurav bhavsar

  2. 0

    Cette question est très vieux, mais je viens de tomber sur le même problème ce matin, et la réponse de @gaurav ne fonctionne pas de la même chose que ce que l'OP a été à la recherche dans ce lien: https://material.angularjs.org/latest/#/demo/material.components.input

    Si vous ouvrez le Chrome developer console, vous pouvez inspecter l'élément et de voir que le gars qui a écrit le code de démonstration sont à l'aide d'une classe personnalisée pour l'icône de comportement de la saisie de courrier électronique dans le fond des icônes de la section. J'ai essentiellement copié ce comportement pour obtenir le même effet désiré.

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

    Une chose à noter est que j'ai eu à ajouter la classe "md-icône de gauche" à mon md-conteneur ou les icônes pile au-dessus de l'entrée. Je suis angulaire à l'aide de matériel de v1.1.0 et angular js v1.5.5 dans mon projet. J'espère que cela répond permet à quiconque cherche à obtenir le même comportement que dans l'angle de Matériel de démonstration.

    OriginalL'auteur jsternadel