Fix position and appearance of magnifying glass icon when opening a Saved Search in Discover.

src/ui/public/directives/saved_object_finder.js

@@ -4,6 +4,7 @@ import keymap from 'ui/utils/key_map';
 import SavedObjectsSavedObjectRegistryProvider from 'ui/saved_objects/saved_object_registry';
 import uiModules from 'ui/modules';
 import savedObjectFinderTemplate from 'ui/partials/saved_object_finder.html';
+import 'ui/partials/saved_object_finder.less';
 const module = uiModules.get('kibana');
 
 module.directive('savedObjectFinder', function ($location, $injector, kbnUrl, Private, config) {

src/ui/public/partials/saved_object_finder.html

@@ -2,8 +2,8 @@
   <div class="container-fluid">
     <div class="row">
       <div class="input-group form-group finder-form col-md-7">
-        <span class="input-group-addon">
-          <i class="fa fa-search"></i>
+        <span class="input-group-addon savedObjectFinderSearchIcon">
+          <span class="fa fa-search"></span>
         </span>
         <input
           input-focus
@@ -13,7 +13,8 @@
           class="form-control"
           name="filter"
           type="text"
-          autocomplete="off" />
+          autocomplete="off"
+        />
       </div>
       <div class="finder-hit-count col-md-2">
         <span>{{finder.hitCount}} of {{finder.hitCount}}</span>
@@ -36,10 +37,10 @@
     <li class="list-group-item" ng-click="finder.sortHits(finder.hits)">
       <span class="paginate-heading">
         Name
-        <i
+        <span
           class="fa"
           ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
-        </i>
+        </span>
       </span>
     </li>
     <li
@@ -52,7 +53,7 @@
       <a ng-href="{{finder.makeUrl(hit)}}"
           ng-blur="finder.hitBlur($event)"
           ng-click="finder.preventClick($event)">
-          <i aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></i>
+          <span aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></span>
           <span>{{hit.title}}</span>
           <p ng-if="hit.description" ng-bind="hit.description"></p>
       </a>

src/ui/public/partials/saved_object_finder.less

@@ -0,0 +1,8 @@
+/**
+ * 1. Position icon correctly and override Bootstrap styles.
+ * 2. Override Bootstrap styles.
+ */
+.savedObjectFinderSearchIcon {
+  padding: 0 10px !important; /* 1 */
+  color: #ACACAC !important; /* 2 */
+}