Add an icons mixin for working with icomoon classes

h/static/styles/inject.scss

 @import 'base';
+@import 'mixins/icons';
 @import 'compass/css3/user-interface';
 @import 'compass/layout/stretching';
 @import 'compass/reset/utilities';
@@ -171,7 +172,7 @@ $base-font-size: 14px;
     position: relative;
   }
 
-  [class^="h-icon-"], [class*=" h-icon-"] {
+  @include icons {
     font-family: 'h';
   }
 }

h/static/styles/mixins/icons.scss

+// Mixin for targeting icomoon fonts. This keeps the class namespace in one
+// place rather than spreading it through individual files.
+// NOTE: If you want to target a specific icon in a component give it a
+// distinct class name rather than using the icon class.
+//
+// Usage:
+//
+//  .my-element {
+//    @include icons {
+//      color: red; // Make any icon red.
+//    }
+//  }
+@mixin icons {
+  [class^="h-icon-"], [class*=" h-icon-"] {
+    @content;
+  }
+}

h/static/styles/simple-search.scss

 @import "base.scss";
+@import "mixins/icons";
 
 .simple-search {
   overflow: hidden;
@@ -43,7 +44,7 @@
 }
 
 .simple-search-clear {
-  [class^="h-icon-"], [class*=" h-icon-"] {
+  @include icons {
     position: absolute;
     top: 50%;
     left: 50%;