CODEWITHSUNDEEP
angularjscssmaterial-design
Aniruddha Das
Aniruddha Das

Reputation: 21698

is there a way to place material icon as input background?

Is there a way to place material icon in an input filed as background at the right?

I know I can place an image as input filed background but material icons are not images and I think these are created by fonts.

this is what I am trying but no luck

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

the icon <i class="material-icons global-search-icon">&#xE8B6;</i> need to be the background image of <input type='text'/>

Upvotes: 1

Views: 2348

Answers (1)

Farzin Kanzi
Farzin Kanzi

Reputation: 3433

You can wrap your input and icon in a div:

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

And add this styles:

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

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

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

Upvotes: 1

Related Questions