入力背景として素材アイコンを配置する方法はありますか？

Question

右の背景に入力ファイルに素材アイコンを配置する方法はありますか？

イメージを入力背景として配置することはできますが、マテリアルアイコンはイメージではなく、これらはフォントによって作成されると思います。

これは私がしようとしていますが、運

<input type="search" class="global-search" 
     ng-model="vm.searchText" 
     ng-keyup="$event.keyCode == 13 ? vm.search() : null" 
     placeholder="I can help you to find anything you want!"/> 

<a ng-click="vm.search()"> 
    <i class="material-icons global-search-icon">&#xE8B6;</i> <!--search--> 
</a> 

アイコン<i class="material-icons global-search-icon">&#xE8B6;</i>あなたはdivの中にあなたの入力し、アイコンをラップすることができます<input type='text'/>

Answer 1

の背景画像である必要はないものです：

<div id="divWrapper">  
    <input type="search" class="global-search" 
    ng-model="vm.searchText" 
    ng-keyup="$event.keyCode == 13 ? vm.search() : null" 
    placeholder="I can help you to find anything you want!"/> 
    <i class="material-icons global-search-icon">&#xE8B6;</i> 
</div> 

このスタイルを追加してください：

#divWrapper{ 
    display:inline; 
    position: relative; 
} 

#divWrapper i { 
    position: absolute; 
    left: 0; 
} 

.global-search:focus + i{ 
    display: none; 
}