diff --git a/ionic/components/action-menu/extensions/ios.scss b/ionic/components/action-menu/extensions/ios.scss
index 2d9c85b126..53a348b09d 100644
--- a/ionic/components/action-menu/extensions/ios.scss
+++ b/ionic/components/action-menu/extensions/ios.scss
@@ -20,7 +20,7 @@ $action-menu-ios-background-active:        #ebebeb !default;
 $action-menu-ios-icon-font-size:           1.4em !default;
 
 
-.action-menu[mode="ios"] {
+.action-menu[mode=ios] {
   text-align: center;
 
   .action-menu-container {
@@ -88,7 +88,7 @@ $action-menu-ios-icon-font-size:           1.4em !default;
 
 }
 
-.hairlines .action-menu[mode="ios"] {
+.hairlines .action-menu[mode=ios] {
   .action-menu-title,
   .action-menu-option {
     border-bottom-width: 0.5px;
diff --git a/ionic/components/action-menu/extensions/material.scss b/ionic/components/action-menu/extensions/material.scss
index 1cd6ca1d4c..97ae2e313e 100644
--- a/ionic/components/action-menu/extensions/material.scss
+++ b/ionic/components/action-menu/extensions/material.scss
@@ -16,7 +16,7 @@ $action-menu-md-background-active:        #f1f1f1 !default;
 $action-menu-md-icon-font-size:           2.4rem !default;
 
 
-.action-menu[mode="md"] {
+.action-menu[mode=md] {
   margin: 0;
 
   .action-menu-container {
diff --git a/ionic/components/app/test/hn/main.html b/ionic/components/app/test/hn/main.html
index 502a5b1b38..1262b134b0 100644
--- a/ionic/components/app/test/hn/main.html
+++ b/ionic/components/app/test/hn/main.html
@@ -5,7 +5,7 @@
 .navbar-container {
   background-color: #ff6600 !important;
 }
-.nav[mode="ios"] ion-title {
+.nav[mode=ios] ion-title {
   color: #fff !important;
 }
 </style>
diff --git a/ionic/components/app/test/yerk/main.html b/ionic/components/app/test/yerk/main.html
index 90aca743e2..8ea812ecec 100644
--- a/ionic/components/app/test/yerk/main.html
+++ b/ionic/components/app/test/yerk/main.html
@@ -1,10 +1,10 @@
 <ion-nav [root]="root"></ion-nav>
 
 <style>
-  .nav[mode="ios"] .navbar-container {
+  .nav[mode=ios] .navbar-container {
     background-color: #2FD9BB !important;
   }
-  .nav[mode="ios"] .navbar-title {
+  .nav[mode=ios] .navbar-title {
     color: #FDFEFE;
   }
   #tabs .tab-bar:before {
diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index 4587c39598..66655e3a9e 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/ionic/components/button/extensions/material.scss
@@ -10,8 +10,8 @@ $button-md-box-shadow-active:        0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px
 $button-md-border-radius:            3px !default;
 
 
-[mode="md"] button,
-[mode="md"] [button] {
+[mode=md] button,
+[mode=md] [button] {
   border-radius: $button-md-border-radius;
 
   min-height: $button-md-min-height;
diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html
index e1d50525f2..336a214556 100644
--- a/ionic/components/button/test/fab/main.html
+++ b/ionic/components/button/test/fab/main.html
@@ -1,16 +1,24 @@
 
-<ion-toolbar>
-  <ion-title>FAB Buttons</ion-title>
-</ion-toolbar>
+<button fab fab-left fab-top>
+  <icon name="ion-plus"></icon>
+</button>
 
-<ion-content>
+<button fab fab-center fab-top secondary>
+  <icon name="ion-plus"></icon>
+</button>
 
-  <button fab fab-left fab-top><i class="icon ion-plus"></i></button>
-  <button fab fab-center fab-top secondary><i class="icon ion-plus"></i></button>
-  <button fab fab-right fab-top danger><i class="icon ion-plus"></i></button>
+<button fab fab-right fab-top danger>
+  <icon name="ion-plus"></icon>
+</button>
 
-  <button fab fab-left fab-bottom light><i class="icon ion-plus"></i></button>
-  <button fab fab-center fab-bottom><i class="icon ion-plus"></i></button>
-  <button fab fab-right fab-bottom dark><i class="icon ion-plus"></i></button>
+<button fab fab-left fab-bottom light>
+  <icon name="ion-plus"></icon>
+</button>
 
-</ion-content>
+<button fab fab-center fab-bottom>
+  <icon name="ion-plus"></icon>
+</button>
+
+<button fab fab-right fab-bottom dark>
+  <icon name="ion-plus"></icon>
+</button>
diff --git a/ionic/components/card/extensions/ios.scss b/ionic/components/card/extensions/ios.scss
index 2aa377bb5c..04c65cc729 100644
--- a/ionic/components/card/extensions/ios.scss
+++ b/ionic/components/card/extensions/ios.scss
@@ -13,7 +13,7 @@ $card-ios-footer-background-color:     $card-ios-background-color !default;
 $card-ios-footer-padding:              10px;
 
 
-.card[mode="ios"] {
+.card[mode=ios] {
   background: $card-ios-background-color;
   box-shadow: $card-ios-box-shadow;
   border-radius: $card-ios-border-radius;
diff --git a/ionic/components/card/extensions/material.scss b/ionic/components/card/extensions/material.scss
index 742b9cc505..177d08f6cf 100644
--- a/ionic/components/card/extensions/material.scss
+++ b/ionic/components/card/extensions/material.scss
@@ -13,7 +13,7 @@ $card-md-footer-background-color:     $card-md-background-color !default;
 $card-md-footer-padding:              10px;
 
 
-.card[mode="md"] {
+.card[mode=md] {
   background: $card-md-background-color;
   box-shadow: $card-md-box-shadow;
   border-radius: $card-md-border-radius;
diff --git a/ionic/components/content/extensions/ios.scss b/ionic/components/content/extensions/ios.scss
index a117308f3c..97b67f74f7 100644
--- a/ionic/components/content/extensions/ios.scss
+++ b/ionic/components/content/extensions/ios.scss
@@ -6,7 +6,7 @@
 $content-ios-background-color:               #efeff4 !default;
 
 
-.nav[mode="ios"].show-pane {
+.nav[mode=ios].show-pane {
 
   .content-container {
     background-color: $content-container-ios-background-color;
diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss
index 4f1ccce9d3..3ec3d6bb9a 100644
--- a/ionic/components/item/extensions/ios.scss
+++ b/ionic/components/item/extensions/ios.scss
@@ -19,7 +19,7 @@ $item-ios-note-color:             $item-ios-border-color !default;
 $item-ios-forward-icon-color:     $item-ios-border-color !default;
 
 
-.list[mode="ios"] {
+.list[mode=ios] {
 
   .item {
     font-size: $item-ios-font-size;
@@ -106,7 +106,7 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
 }
 
 
-.hairlines .list[mode="ios"] .item {
+.hairlines .list[mode=ios] .item {
   margin-top: -0.5px;
 
   &:before,
diff --git a/ionic/components/item/extensions/material.scss b/ionic/components/item/extensions/material.scss
index d53c3cb676..0d4f8b3232 100644
--- a/ionic/components/item/extensions/material.scss
+++ b/ionic/components/item/extensions/material.scss
@@ -19,7 +19,7 @@ $item-md-note-color:             $item-md-border-color !default;
 $item-md-forward-icon-color:     $item-md-border-color !default;
 
 
-.list[mode="md"] {
+.list[mode=md] {
 
   .item {
     font-size: $item-md-font-size;
diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss
index cd77446492..657d285675 100644
--- a/ionic/components/list/extensions/ios.scss
+++ b/ionic/components/list/extensions/ios.scss
@@ -15,7 +15,7 @@ $list-ios-footer-letter-spacing:  0.1rem !default;
 $list-ios-footer-color:           #333 !default;
 
 
-.list[mode="ios"] {
+.list[mode=ios] {
 
   ion-list-header {
     padding: $list-ios-header-padding;
diff --git a/ionic/components/list/extensions/material.scss b/ionic/components/list/extensions/material.scss
index 947ed40b41..8c7e503624 100644
--- a/ionic/components/list/extensions/material.scss
+++ b/ionic/components/list/extensions/material.scss
@@ -11,7 +11,7 @@ $list-md-footer-font-size:      1.2rem !default;
 $list-md-footer-color:          #8f8f94 !default;
 
 
-.list[mode="md"] {
+.list[mode=md] {
 
   ion-list-header {
     padding: $list-md-header-padding;
diff --git a/ionic/components/nav-bar/extensions/ios.scss b/ionic/components/nav-bar/extensions/ios.scss
index c2266d0b31..b963f8a134 100644
--- a/ionic/components/nav-bar/extensions/ios.scss
+++ b/ionic/components/nav-bar/extensions/ios.scss
@@ -5,7 +5,7 @@
 $navbar-ios-height:                        4.4rem !default;
 
 
-.nav[mode="ios"] {
+.nav[mode=ios] {
 
   .navbar-container {
     min-height: $navbar-ios-height;
diff --git a/ionic/components/nav-bar/extensions/material.scss b/ionic/components/nav-bar/extensions/material.scss
index 24e201dc7e..e9a19c56e0 100644
--- a/ionic/components/nav-bar/extensions/material.scss
+++ b/ionic/components/nav-bar/extensions/material.scss
@@ -5,7 +5,7 @@
 $navbar-md-height:                  5.6rem !default;
 
 
-.nav[mode="md"] {
+.nav[mode=md] {
 
   .navbar-container {
     min-height: $navbar-md-height;
diff --git a/ionic/components/popup/extensions/ios.scss b/ionic/components/popup/extensions/ios.scss
index 3430388022..37adeb4b60 100644
--- a/ionic/components/popup/extensions/ios.scss
+++ b/ionic/components/popup/extensions/ios.scss
@@ -7,7 +7,7 @@ $popup-ios-bg-color:              #f8f8f8 !default;
 $popup-ios-button-text-color:     color(primary) !default;
 
 
-.popup[mode="ios"] {
+.popup[mode=ios] {
 
   popup-wrapper {
     border-radius: $popup-ios-border-radius;
diff --git a/ionic/components/popup/extensions/material.scss b/ionic/components/popup/extensions/material.scss
index c6dc016217..dba8c15ce8 100644
--- a/ionic/components/popup/extensions/material.scss
+++ b/ionic/components/popup/extensions/material.scss
@@ -6,7 +6,7 @@ $popup-md-border-radius:       13px !default;
 $popup-md-bg-color:            #f8f8f8 !default;
 
 
-.popup[mode="md"] {
+.popup[mode=md] {
 
   popup-wrapper {
     border-radius: $popup-md-border-radius;
diff --git a/ionic/components/radio/extensions/ios.scss b/ionic/components/radio/extensions/ios.scss
index b479884ec1..a5c4aa0a68 100644
--- a/ionic/components/radio/extensions/ios.scss
+++ b/ionic/components/radio/extensions/ios.scss
@@ -5,7 +5,7 @@
 $radio-ios-active-color:       color(primary) !default;
 
 
-.radio[mode="ios"] {
+.radio[mode=ios] {
 
   .radio-icon {
     position: relative;
diff --git a/ionic/components/search-bar/extensions/ios.scss b/ionic/components/search-bar/extensions/ios.scss
index 8a2f766efb..b4934d1d0e 100644
--- a/ionic/components/search-bar/extensions/ios.scss
+++ b/ionic/components/search-bar/extensions/ios.scss
@@ -10,7 +10,7 @@ $search-bar-ios-background-svg:       "<svg xmlns='http://www.w3.org/2000/svg' v
 $search-bar-ios-background-size:      13px 13px !default;
 
 
-.search-bar[mode="ios"] {
+.search-bar[mode=ios] {
   padding: $search-bar-ios-padding;
   background: $search-bar-ios-background-color;
   border-bottom: 1px solid $search-bar-ios-border-color;
@@ -56,6 +56,6 @@ $search-bar-ios-background-size:      13px 13px !default;
   }
 }
 
-.hairlines .search-bar[mode="ios"] {
+.hairlines .search-bar[mode=ios] {
   border-bottom-width: 0.5px;
 }
diff --git a/ionic/components/segment/extensions/ios.scss b/ionic/components/segment/extensions/ios.scss
index 0317005cd9..12def88bc7 100644
--- a/ionic/components/segment/extensions/ios.scss
+++ b/ionic/components/segment/extensions/ios.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 
-.segment[mode="ios"] .ion-segment {
+.segment[mode=ios] .ion-segment {
   > button,
   > [button] {
     border-width: 1px;
diff --git a/ionic/components/switch/extensions/ios.scss b/ionic/components/switch/extensions/ios.scss
index c42ba32ecf..330258aa57 100644
--- a/ionic/components/switch/extensions/ios.scss
+++ b/ionic/components/switch/extensions/ios.scss
@@ -8,7 +8,7 @@ $switch-ios-border-width:              2px !default;
 $switch-ios-border-radius:             30px !default;
 
 $switch-ios-off-bg-color:              $list-background-color !default;
-$switch-ios-off-border-color:          $list-border-color !default;
+$switch-ios-off-border-color:          lighten($list-border-color, 10%) !default;
 
 $switch-ios-on-bg-color:               color(primary) !default;
 $switch-ios-on-border-color:           $switch-ios-on-bg-color !default;
@@ -25,7 +25,7 @@ $switch-ios-handle-on-bg-color:        $switch-ios-off-bg-color !default;
 $switch-ios-transition-duration:       200ms !default;
 
 
-.switch[mode="ios"] {
+.switch[mode=ios] {
 
   .item-media {
     margin: 0;
diff --git a/ionic/components/tabs/extensions/ios.scss b/ionic/components/tabs/extensions/ios.scss
index b3d8c0bb40..ea22db7375 100644
--- a/ionic/components/tabs/extensions/ios.scss
+++ b/ionic/components/tabs/extensions/ios.scss
@@ -8,7 +8,7 @@ $tab-bar-ios-item-icon-size:           30px !default;
 $tab-bar-ios-height:                   50px !default;
 
 
-.tabs[mode="ios"] {
+.tabs[mode=ios] {
 
   .tab-bar {
     min-height: $tab-bar-ios-height;
@@ -45,7 +45,7 @@ $tab-bar-ios-height:                   50px !default;
 
 }
 
-.hairlines .tabs[mode="ios"] {
+.hairlines .tabs[mode=ios] {
 
   .tab-bar {
     border-top-width: 0.5px;
diff --git a/ionic/components/tabs/extensions/material.scss b/ionic/components/tabs/extensions/material.scss
index d2dea68d3b..e6fc58c077 100644
--- a/ionic/components/tabs/extensions/material.scss
+++ b/ionic/components/tabs/extensions/material.scss
@@ -8,7 +8,7 @@ $tab-bar-md-item-icon-size:           26px !default;
 $tab-bar-md-item-height:              4.8rem !default;
 
 
-.tabs[mode="md"] {
+.tabs[mode=md] {
 
   button.tab-button {
     padding: $tab-bar-md-item-padding;
diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss
index 4858795f09..40cdfd89f8 100644
--- a/ionic/components/toolbar/extensions/ios.scss
+++ b/ionic/components/toolbar/extensions/ios.scss
@@ -15,8 +15,8 @@ $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
 
-.nav[mode="ios"] .toolbar,
-.toolbar[mode="ios"] {
+.nav[mode=ios] .toolbar,
+.toolbar[mode=ios] {
   border-bottom: 1px solid $toolbar-ios-border-color;
   min-height: $toolbar-ios-height;
 
@@ -59,6 +59,6 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 }
 
-.hairlines .toolbar[mode="ios"] {
+.hairlines .toolbar[mode=ios] {
   border-bottom-width: 0.5px;
 }
diff --git a/ionic/components/toolbar/extensions/material.scss b/ionic/components/toolbar/extensions/material.scss
index cce7dc6613..84871d1f20 100644
--- a/ionic/components/toolbar/extensions/material.scss
+++ b/ionic/components/toolbar/extensions/material.scss
@@ -7,8 +7,8 @@ $toolbar-md-title-font-size:         2rem !default;
 $toolbar-md-button-font-size:        1.4rem !default;
 
 
-.nav[mode="md"] .toolbar,
-.toolbar[mode="md"] {
+.nav[mode=md] .toolbar,
+.toolbar[mode=md] {
   min-height: $toolbar-md-height;
 
   .toolbar-inner-title {