diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index e4ab7fd12f..9a0b2965cc 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -4,28 +4,31 @@
 // iOS Searchbar
 // --------------------------------------------------
 
-$searchbar-ios-padding-top-bottom:       0 !default;
-$searchbar-ios-padding-left-right:       8px !default;
-$searchbar-ios-background-color:         rgba(0, 0, 0, 0.2) !default;
-$searchbar-ios-border-color:             rgba(0, 0, 0, 0.05) !default;
-$searchbar-ios-min-height:               44px !default;
+$searchbar-ios-padding-top-bottom:        0 !default;
+$searchbar-ios-padding-left-right:        8px !default;
+$searchbar-ios-background-color:          rgba(0, 0, 0, 0.2) !default;
+$searchbar-ios-border-color:              rgba(0, 0, 0, 0.05) !default;
+$searchbar-ios-min-height:                44px !default;
 
-$searchbar-ios-input-search-icon-color:  rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-search-icon-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $searchbar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $searchbar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
-$searchbar-ios-input-search-icon-size:   13px !default;
+$searchbar-ios-input-search-icon-color:   rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $searchbar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $searchbar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
+$searchbar-ios-input-search-icon-size:    13px !default;
 
-$searchbar-ios-input-height:             28px !default;
-$searchbar-ios-input-placeholder-color:  rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-text-color:         #000 !default;
-$searchbar-ios-input-background-color:   #FFFFFF !default;
-$searchbar-ios-input-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;
-$searchbar-ios-cancel-transition:        all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-input-height:              100% !default;
+$searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-text-color:          #000 !default;
+$searchbar-ios-input-background-color:    #FFFFFF !default;
+$searchbar-ios-input-transition:          all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-cancel-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;
 
-$searchbar-ios-input-close-icon-color:   rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
-$searchbar-ios-input-close-icon-size:    18px !default;
+$searchbar-ios-input-clear-icon-color:    rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
+$searchbar-ios-input-clear-icon-size:     18px !default;
 
 
+// Searchbar
+// -----------------------------------------
+
 ion-searchbar {
   padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
   background: $searchbar-ios-background-color;
@@ -33,6 +36,10 @@ ion-searchbar {
   min-height: $searchbar-ios-min-height;
 }
 
+
+// Searchbar Search Icon
+// -----------------------------------------
+
 .searchbar-search-icon {
   width: $searchbar-ios-input-search-icon-size + 1;
   height: $searchbar-ios-input-search-icon-size + 1;
@@ -48,6 +55,10 @@ ion-searchbar {
   transition: $searchbar-ios-input-transition;
 }
 
+
+// Searchbar Input Field
+// -----------------------------------------
+
 .searchbar-input {
   height: $searchbar-ios-input-height;
   padding: 0 28px;
@@ -66,12 +77,16 @@ ion-searchbar {
   transition: $searchbar-ios-input-transition;
 }
 
-.searchbar-close-icon {
+
+// Searchbar Clear Input Icon
+// -----------------------------------------
+
+.searchbar-clear-icon {
   width: 30px;
   height: 100%;
 
-  @include svg-background-image($searchbar-ios-input-close-icon-svg);
-  background-size: $searchbar-ios-input-close-icon-size;
+  @include svg-background-image($searchbar-ios-input-clear-icon-svg);
+  background-size: $searchbar-ios-input-clear-icon-size;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;
@@ -79,8 +94,11 @@ ion-searchbar {
   top: 0;
 }
 
-.searchbar-cancel {
-  @extend button[clear];
+
+// Searchbar Cancel (iOS only)
+// -----------------------------------------
+
+.searchbar-ios-cancel {
   transition: $searchbar-ios-cancel-transition;
   min-height: 30px;
 
@@ -92,14 +110,18 @@ ion-searchbar {
   flex: 0 0 0%;
 }
 
-ion-searchbar.left-align {
+
+// Searchbar Left Aligned (iOS only)
+// -----------------------------------------
+
+.searchbar-left-aligned {
   .searchbar-search-icon {
     margin-left: 0;
   }
   .searchbar-input {
     padding-left: 30px;
   }
-  .searchbar-cancel {
+  .searchbar-ios-cancel {
     transform: translateX(0);
     flex: 0 0 auto;
     padding-left: 8px;
@@ -107,9 +129,9 @@ ion-searchbar.left-align {
   }
 }
 
-&.hairlines ion-searchbar {
-  border-bottom-width: 0.55px;
-}
+
+// Searchbar in Toolbar
+// -----------------------------------------
 
 .toolbar {
 
@@ -121,21 +143,34 @@ ion-searchbar.left-align {
       background-color: rgba(0, 0, 0, 0.08);
     }
 
-    .searchbar-cancel {
+    .searchbar-ios-cancel {
       padding: 0;
     }
   }
 
-  .left-align .searchbar-cancel {
+  .searchbar-left-aligned .searchbar-ios-cancel {
     padding-left: 8px;
   }
 
 }
 
-.searchbar-cancel-icon {
+
+// Searchbar Cancel (MD only)
+// -----------------------------------------
+
+.searchbar-md-cancel {
   display: none;
 }
 
+
+// Searchbar Hairlines (iOS only)
+// -----------------------------------------
+
+&.hairlines ion-searchbar {
+  border-bottom-width: 0.55px;
+}
+
+
 // Generate Default Search Bar Colors
 // --------------------------------------------------
 
@@ -143,7 +178,7 @@ ion-searchbar.left-align {
 
   ion-searchbar[#{$color-name}] {
 
-    .searchbar-cancel {
+    .searchbar-ios-cancel {
       color: $color-value;
     }
   }
diff --git a/ionic/components/searchbar/modes/md.scss b/ionic/components/searchbar/modes/md.scss
index d90cc29c98..0e347176a9 100644
--- a/ionic/components/searchbar/modes/md.scss
+++ b/ionic/components/searchbar/modes/md.scss
@@ -4,34 +4,63 @@
 // Material Design Searchbar
 // --------------------------------------------------
 
-$searchbar-md-padding:                  8px !default;
-$searchbar-md-background-color:         inherit !default;
+$searchbar-md-padding:                   8px !default;
+$searchbar-md-background-color:          inherit !default;
 
-$searchbar-md-input-search-icon-color:  #5B5B5B !default;
-$searchbar-md-input-search-icon-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
-$searchbar-md-input-search-icon-size:   20px !default;
+$searchbar-md-input-search-icon-color:   #5B5B5B !default;
+$searchbar-md-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
+$searchbar-md-input-search-icon-size:    20px !default;
 
-$searchbar-md-input-height:             28px !default;
-$searchbar-md-input-box-shadow:         0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
-$searchbar-md-input-placeholder-color:  #AEAEAE !default;
-$searchbar-md-input-text-color:         #141414 !default;
-$searchbar-md-input-background-color:   #FFFFFF !default;
-$searchbar-md-input-border-radius:      2px !default;
+$searchbar-md-input-height:              100% !default;
+$searchbar-md-input-box-shadow:          0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$searchbar-md-input-placeholder-color:   #AEAEAE !default;
+$searchbar-md-input-text-color:          #141414 !default;
+$searchbar-md-input-background-color:    #FFFFFF !default;
+$searchbar-md-input-border-radius:       2px !default;
 
-$searchbar-md-input-close-icon-color:   #5B5B5B !default;
-$searchbar-md-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-close-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
-$searchbar-md-input-close-icon-size:    22px !default;
+$searchbar-md-input-clear-icon-color:    #5B5B5B !default;
+$searchbar-md-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
+$searchbar-md-input-clear-icon-size:     22px !default;
+
+
+// Searchbar
+// -----------------------------------------
 
 ion-searchbar {
   padding: $searchbar-md-padding;
   background: $searchbar-md-background-color;
 }
 
-.searchbar-search-icon,
-button.searchbar-cancel-icon {
+
+// Searchbar Search Icon
+// -----------------------------------------
+
+.searchbar-search-icon {
   width: $searchbar-md-input-search-icon-size + 1;
   height: $searchbar-md-input-search-icon-size + 1;
+  top: 11px;
+  left: 16px;
+  @include svg-background-image($searchbar-md-input-search-icon-svg);
+}
 
+
+// Searchbar Cancel Icon (MD only)
+// -----------------------------------------
+
+.searchbar-md-cancel {
+  display: none;
+  width: $searchbar-md-input-search-icon-size + 1;
+  height: 100%;
+  margin: 0;
+  top: 0;
+  left: 10px;
+}
+
+// Searchbar Search & Cancel Icon
+// -----------------------------------------
+
+.searchbar-search-icon,
+.searchbar-md-cancel {
   background-size: $searchbar-md-input-search-icon-size;
   background-repeat: no-repeat;
   position: absolute;
@@ -41,19 +70,9 @@ button.searchbar-cancel-icon {
   }
 }
 
-.searchbar-search-icon {
-  top: 11px;
-  left: 16px;
-  @include svg-background-image($searchbar-md-input-search-icon-svg);
-}
 
-button.searchbar-cancel-icon {
-  display: none;
-  height: 100%;
-  margin: 0;
-  top: 0;
-  left: 10px;
-}
+// Searchbar Input Field
+// -----------------------------------------
 
 .searchbar-input {
   padding: 6px 55px;
@@ -72,13 +91,17 @@ button.searchbar-cancel-icon {
   @include placeholder($searchbar-md-input-placeholder-color);
 }
 
-button.searchbar-close-icon {
-  width: $searchbar-md-input-close-icon-size;
+
+// Searchbar Clear Input Icon
+// -----------------------------------------
+
+.searchbar-clear-icon {
+  width: $searchbar-md-input-clear-icon-size;
   height: 100%;
   padding: 0;
 
-  @include svg-background-image($searchbar-md-input-close-icon-svg);
-  background-size: $searchbar-md-input-close-icon-size;
+  @include svg-background-image($searchbar-md-input-clear-icon-svg);
+  background-size: $searchbar-md-input-clear-icon-size;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;
@@ -90,31 +113,38 @@ button.searchbar-close-icon {
   }
 }
 
-.searchbar-cancel {
-  display: none;
-}
 
-.focused {
+// Searchbar Focused
+// -----------------------------------------
 
+.searchbar-focused {
   .searchbar-search-icon {
     display: none;
   }
 
-  button.searchbar-cancel-icon {
+  .searchbar-md-cancel {
     display: inline-flex;
   }
-
 }
 
-.toolbar {
 
+// Searchbar in Toolbar
+// -----------------------------------------
+
+.toolbar {
   ion-searchbar {
     padding: 3px;
   }
 
-  button.searchbar-cancel-icon {
+  .searchbar-md-cancel {
     left: 14px;
   }
-
-
+}
+
+
+// Searchbar Cancel Icon (iOS only)
+// -----------------------------------------
+
+.searchbar-ios-cancel {
+  display: none;
 }
diff --git a/ionic/components/searchbar/searchbar.scss b/ionic/components/searchbar/searchbar.scss
index 1da21d8d86..104eac8ae8 100644
--- a/ionic/components/searchbar/searchbar.scss
+++ b/ionic/components/searchbar/searchbar.scss
@@ -23,17 +23,16 @@ ion-searchbar {
   width: 100%;
 }
 
-input[type="search"].searchbar-input {
+.searchbar-input {
   display: block;
   width: 100%;
-  height: 100%;
   border: none;
   font-family: inherit;
   line-height: 3rem;
   @include appearance(none);
 }
 
-.searchbar-close-icon {
+.searchbar-clear-icon {
   min-height: 0;
   padding: 0;
   margin: 0;
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index cb69280e8a..8dfeb51f59 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -4,6 +4,7 @@ import {Ion} from '../ion';
 import {Config} from '../../config/config';
 import {ConfigComponent} from '../../config/decorators';
 import {Icon} from '../icon/icon';
+import {Button} from '../button/button';
 
 /**
  * @name Searchbar
@@ -31,19 +32,19 @@ import {Icon} from '../icon/icon';
   },
   inputs: ['cancelAction'],
   host: {
-   '[class.left-align]': 'shouldLeftAlign',
-   '[class.focused]': 'isFocused',
+   '[class.searchbar-left-aligned]': 'shouldLeftAlign',
+   '[class.searchbar-focused]': 'isFocused',
   },
   template:
     '<div class="searchbar-input-container">' +
-      '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-cancel-icon"><icon arrow-back></icon></button>' +
+      '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel"><icon arrow-back></icon></button>' +
       '<div class="searchbar-search-icon"></div>' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
-      '<button clear *ng-if="query" class="searchbar-close-icon" (click)="clearInput($event)"></button>' +
+      '<button clear *ng-if="query" class="searchbar-clear-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
-    '<button *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-cancel">{{cancelText}}</button>',
-  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon]
+    '<button clear *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
+  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button]
 })
 export class Searchbar extends Ion {
   /**
diff --git a/ionic/components/searchbar/test/floating/e2e.ts b/ionic/components/searchbar/test/floating/e2e.ts
index 80da38ae4e..3c67c74834 100644
--- a/ionic/components/searchbar/test/floating/e2e.ts
+++ b/ionic/components/searchbar/test/floating/e2e.ts
@@ -21,5 +21,5 @@ it('custom cancel action should focus', function() {
 
 // TODO - this test will work on iOS but fail on Android
 // it('custom cancel action should alert', function() {
-//   element(by.css('.e2eCustomCancelActionFloatingSearchbar .searchbar-cancel')).click();
+//   element(by.css('.e2eCustomCancelActionFloatingSearchbar .searchbar-ios-cancel')).click();
 // });