Thêm biểu tượng để góc đầu vào nguyên liệu

Question

Tôi cố gắng để thêm một biểu tượng tìm kiếm để thanh tìm kiếm đầu vào của tôi ra khỏi 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> 

Khi tôi đang cố gắng để tái tạo ví dụ với các biểu tượng mà chúng ta có thể thấy có: http://codepen.io/anon/pen/rOxMdR, tôi đang gặp sự cố về kiểu và không có gì hoạt động đúng.

Bất kỳ ý tưởng nào về cách tôi có thể chỉ cần thêm biểu tượng tìm kiếm vào đầu vào hiện tại của mình?

Answer 1

Khi bạn đang sử dụng angular-material-design và font-awesome-icon hãy sử dụng <md-icon> làm thành phần với thuộc tính md-font-icon.

Và sử dụng class="md-icon-float" với md-inout-container.

Làm việc plunker

Thay đổi này:

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

Answer 2

Câu hỏi này là rất cũ nhưng tôi chỉ chạy vào cùng một vấn đề sáng nay và câu trả lời từ @gaurav không hoạt động giống như những gì OP đang tìm kiếm trong liên kết này: https://material.angularjs.org/latest/#/demo/material.components.input

Nếu bạn mở bảng điều khiển dành cho nhà phát triển Chrome, bạn có thể kiểm tra phần tử và thấy rằng những người đã viết mã demo đang sử dụng lớp tùy chỉnh cho hành vi biểu tượng của đầu vào email trong phần biểu tượng dưới cùng. Tôi về cơ bản sao chép hành vi đó để đạt được cùng một hiệu quả mong muốn.

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

Một điều cần lưu ý là tôi đã có thêm lớp "md-icon-left" để tôi md-ten-nơ hoặc các biểu tượng sẽ xếp chồng lên trên đầu vào. Tôi đang sử dụng vật liệu góc v1.1.0 và js góc v1.5.5 trong dự án của tôi. Tôi hy vọng câu trả lời này sẽ giúp bất kỳ ai khác tìm cách đạt được hành vi tương tự như trong bản giới thiệu Material Angular Material.