SodhanaLibrary

This is small code snippet for quick use.  Observe below image. Those search and reset icons are from font-awesome library

Click here to see DEMO

Include below libraries

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

Markup

Here slinput class wraps up search icon, reset icon and text box

<div class="slinput" ng-init="">
    <i class="fa fa-search left-icon"></i> 
    <input placeholder="Search here" ng-model="searchInputVal"/> 
    <i ng-class="{'fa' : true, 'fa-close' : true, 'right-icon' : true, active : (searchInputVal.length > 0)}" ng-click="searchInputVal = ''"></i>
</div>

CSS

/* padding left and right is for search and reset icons */
.slinput input {
  padding:10px;
  width:100%;
  border:1px solid #ccc;
  padding-left:31px;
  padding-right:30px;
  color:black;
  font-family: arial,sans-serif;
  font-size: 16px;
}
/* Remove IE10's “clear field” X button */
.slinput input::-ms-clear {
    display: none;
}
.slinput input:focus {
  border:1px solid #4d90fe;
}

/* left side icon style (search icon) */
.slinput .left-icon {
  position:absolute;
  left:10px;
  top:11px;
}
.slinput .fa {
  color:#444;
  font-size: 16px;
}
.slinput .fa-close {
  color:#ccc;
}

.slinput .active {
  color:#555;
}



/* right side icon style (search icon) */
.slinput .right-icon {
  position:absolute;
  right:10px;
  top:11px;
  cursor:pointer;
}
.slinput {
  position:relative;
  width:100%;
}