From d724b78632dedf0ec87821986d8faff4a2c24f79 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 31 Oct 2013 17:07:42 -0500
Subject: [PATCH] i, .icon selectors, no more wildcard icon selector

---
 dist/css/ionic-ios7.css   | 32 +++++++++++++++++++-------------
 dist/css/ionic-scoped.css | 34 ++++++++++++++++++++--------------
 dist/css/ionic.css        | 34 ++++++++++++++++++++--------------
 ionicons/style.scss       |  2 +-
 scss/ionic/_bar.scss      |  3 +--
 scss/ionic/_form.scss     |  2 +-
 scss/ionic/_items.scss    | 16 ++++++++++------
 scss/ionic/_tabs.scss     |  8 +++++---
 8 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 45d6b83842..4b48a6ecdc 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -656,8 +656,7 @@ a.subdued‎ {
     background-color: transparent;
     font-size: 12px;
     line-height: 28px; }
-    .bar > .button [class^="icon-"],
-    .bar > .button [class*=" icon-"] {
+    .bar > .button i, .bar > .button .icon {
       margin-top: 1px; }
   .bar .button-bar {
     line-height: 18px; }
@@ -930,7 +929,8 @@ a.subdued‎ {
   font-size: 10px;
   line-height: 14px; }
 
-.tab-item i {
+.tab-item i,
+.tab-item .icon {
   display: block;
   margin: 0 auto;
   height: 32px;
@@ -939,14 +939,16 @@ a.subdued‎ {
 .tabs-icon-left .tab-item,
 .tabs-icon-right .tab-item {
   font-size: 10px; }
-  .tabs-icon-left .tab-item i,
-  .tabs-icon-right .tab-item i {
+  .tabs-icon-left .tab-item i, .tabs-icon-left .tab-item .icon,
+  .tabs-icon-right .tab-item i,
+  .tabs-icon-right .tab-item .icon {
     font-size: 24px;
     display: inline-block;
     vertical-align: top;
     line-height: 49px; }
 
-.tabs-icon-only i {
+.tabs-icon-only i,
+.tabs-icon-only .icon {
   line-height: inherit; }
 
 /* Navigational tab */
@@ -1178,7 +1180,8 @@ a.item {
   overflow: hidden;
   white-space: nowrap; }
 
-.item i {
+.item i,
+.item .icon {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
@@ -1199,7 +1202,7 @@ a.item {
 
 .item-icon-left {
   padding-left: 45px; }
-  .item-icon-left i {
+  .item-icon-left i, .item-icon-left .icon {
     left: 7.5px; }
 
 .item-slider.item-icon-left {
@@ -1207,13 +1210,16 @@ a.item {
   .item-slider.item-icon-left .item-content {
     padding-left: 45px; }
 
-.item-icon-right i {
+.item-icon-right i,
+.item-icon-right .icon {
   right: 7.5px; }
 
-.item-icon-left.item-icon-right i:first-child {
+.item-icon-left.item-icon-right i:first-child,
+.item-icon-left.item-icon-right .icon:first-child {
   right: auto; }
 
-.item-icon-left.item-icon-right i:last-child {
+.item-icon-left.item-icon-right i:last-child,
+.item-icon-left.item-icon-right .icon:last-child {
   left: auto; }
 
 a.item:active,
@@ -1339,7 +1345,7 @@ button.item-icon-right:after {
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
   .item-edit .button {
     height: 100%; }
-  .item-edit i {
+  .item-edit i, .item-edit .icon {
     color: #ef4e3a;
     font-size: 24px; }
   .item-edit.ng-enter {
@@ -1552,7 +1558,7 @@ textarea {
     max-width: 200px;
     color: black;
     font-weight: bold; }
-  .item-input [class^="icon-"], .item-input [class*=" icon-"] {
+  .item-input i, .item-input .icon {
     -webkit-box-flex: 0;
     -webkit-flex: 0 0 24px;
     -moz-box-flex: 0;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 6b2122ae20..dab90744a3 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -212,7 +212,7 @@
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg); } }
  }
-  .ionic [class*="icon-"] {
+  .ionic i, .ionic .icon {
     font-family: 'ionicons';
     speak: none;
     font-style: normal;
@@ -1589,8 +1589,7 @@
       background-color: transparent;
       font-size: 12px;
       line-height: 28px; }
-      .ionic .bar > .button [class^="icon-"],
-      .ionic .bar > .button [class*=" icon-"] {
+      .ionic .bar > .button i, .ionic .bar > .button .icon {
         margin-top: 1px; }
     .ionic .bar .button-bar {
       line-height: 18px; }
@@ -1840,7 +1839,8 @@
   .ionic .tabs-icon-bottom .tab-item {
     font-size: 10px;
     line-height: 14px; }
-  .ionic .tab-item i {
+  .ionic .tab-item i,
+  .ionic .tab-item .icon {
     display: block;
     margin: 0 auto;
     height: 32px;
@@ -1848,13 +1848,15 @@
   .ionic .tabs-icon-left .tab-item,
   .ionic .tabs-icon-right .tab-item {
     font-size: 10px; }
-    .ionic .tabs-icon-left .tab-item i,
-    .ionic .tabs-icon-right .tab-item i {
+    .ionic .tabs-icon-left .tab-item i, .ionic .tabs-icon-left .tab-item .icon,
+    .ionic .tabs-icon-right .tab-item i,
+    .ionic .tabs-icon-right .tab-item .icon {
       font-size: 24px;
       display: inline-block;
       vertical-align: top;
       line-height: 49px; }
-  .ionic .tabs-icon-only i {
+  .ionic .tabs-icon-only i,
+  .ionic .tabs-icon-only .icon {
     line-height: inherit; }
   .ionic .tab-item.active, .ionic .tab-item:active {
     opacity: 1; }
@@ -2067,7 +2069,8 @@
   .ionic .item-slider.item-text-wrap p {
     overflow: hidden;
     white-space: nowrap; }
-  .ionic .item i {
+  .ionic .item i,
+  .ionic .item .icon {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-flex;
@@ -2086,17 +2089,20 @@
     font-size: 28px; }
   .ionic .item-icon-left {
     padding-left: 45px; }
-    .ionic .item-icon-left i {
+    .ionic .item-icon-left i, .ionic .item-icon-left .icon {
       left: 7.5px; }
   .ionic .item-slider.item-icon-left {
     padding-left: 0; }
     .ionic .item-slider.item-icon-left .item-content {
       padding-left: 45px; }
-  .ionic .item-icon-right i {
+  .ionic .item-icon-right i,
+  .ionic .item-icon-right .icon {
     right: 7.5px; }
-  .ionic .item-icon-left.item-icon-right i:first-child {
+  .ionic .item-icon-left.item-icon-right i:first-child,
+  .ionic .item-icon-left.item-icon-right .icon:first-child {
     right: auto; }
-  .ionic .item-icon-left.item-icon-right i:last-child {
+  .ionic .item-icon-left.item-icon-right i:last-child,
+  .ionic .item-icon-left.item-icon-right .icon:last-child {
     left: auto; }
   .ionic a.item:active,
   .ionic button.item:active,
@@ -2205,7 +2211,7 @@
     -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
     .ionic .item-edit .button {
       height: 100%; }
-    .ionic .item-edit i {
+    .ionic .item-edit i, .ionic .item-edit .icon {
       color: #ef4e3a;
       font-size: 24px; }
     .ionic .item-edit.ng-enter {
@@ -2387,7 +2393,7 @@
       max-width: 200px;
       color: black;
       font-weight: bold; }
-    .ionic .item-input [class^="icon-"], .ionic .item-input [class*=" icon-"] {
+    .ionic .item-input i, .ionic .item-input .icon {
       -webkit-box-flex: 0;
       -webkit-flex: 0 0 24px;
       -moz-box-flex: 0;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index e1d2edf70d..6490f9f240 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -6,7 +6,7 @@
   font-weight: normal;
   font-style: normal; }
 
-[class*="icon-"] {
+i, .icon {
   font-family: 'ionicons';
   speak: none;
   font-style: normal;
@@ -2025,8 +2025,7 @@ a.subdued‎ {
     background-color: transparent;
     font-size: 12px;
     line-height: 28px; }
-    .bar > .button [class^="icon-"],
-    .bar > .button [class*=" icon-"] {
+    .bar > .button i, .bar > .button .icon {
       margin-top: 1px; }
   .bar .button-bar {
     line-height: 18px; }
@@ -2299,7 +2298,8 @@ a.subdued‎ {
   font-size: 10px;
   line-height: 14px; }
 
-.tab-item i {
+.tab-item i,
+.tab-item .icon {
   display: block;
   margin: 0 auto;
   height: 32px;
@@ -2308,14 +2308,16 @@ a.subdued‎ {
 .tabs-icon-left .tab-item,
 .tabs-icon-right .tab-item {
   font-size: 10px; }
-  .tabs-icon-left .tab-item i,
-  .tabs-icon-right .tab-item i {
+  .tabs-icon-left .tab-item i, .tabs-icon-left .tab-item .icon,
+  .tabs-icon-right .tab-item i,
+  .tabs-icon-right .tab-item .icon {
     font-size: 24px;
     display: inline-block;
     vertical-align: top;
     line-height: 49px; }
 
-.tabs-icon-only i {
+.tabs-icon-only i,
+.tabs-icon-only .icon {
   line-height: inherit; }
 
 /* Navigational tab */
@@ -2581,7 +2583,8 @@ a.item {
   overflow: hidden;
   white-space: nowrap; }
 
-.item i {
+.item i,
+.item .icon {
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-flex;
@@ -2602,7 +2605,7 @@ a.item {
 
 .item-icon-left {
   padding-left: 45px; }
-  .item-icon-left i {
+  .item-icon-left i, .item-icon-left .icon {
     left: 7.5px; }
 
 .item-slider.item-icon-left {
@@ -2610,13 +2613,16 @@ a.item {
   .item-slider.item-icon-left .item-content {
     padding-left: 45px; }
 
-.item-icon-right i {
+.item-icon-right i,
+.item-icon-right .icon {
   right: 7.5px; }
 
-.item-icon-left.item-icon-right i:first-child {
+.item-icon-left.item-icon-right i:first-child,
+.item-icon-left.item-icon-right .icon:first-child {
   right: auto; }
 
-.item-icon-left.item-icon-right i:last-child {
+.item-icon-left.item-icon-right i:last-child,
+.item-icon-left.item-icon-right .icon:last-child {
   left: auto; }
 
 a.item:active,
@@ -2742,7 +2748,7 @@ button.item-icon-right:after {
   -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
   .item-edit .button {
     height: 100%; }
-  .item-edit i {
+  .item-edit i, .item-edit .icon {
     color: #ef4e3a;
     font-size: 24px; }
   .item-edit.ng-enter {
@@ -2955,7 +2961,7 @@ textarea {
     max-width: 200px;
     color: black;
     font-weight: bold; }
-  .item-input [class^="icon-"], .item-input [class*=" icon-"] {
+  .item-input i, .item-input .icon {
     -webkit-box-flex: 0;
     -webkit-flex: 0 0 24px;
     -moz-box-flex: 0;
diff --git a/ionicons/style.scss b/ionicons/style.scss
index b248fffc3e..157a59ce35 100644
--- a/ionicons/style.scss
+++ b/ionicons/style.scss
@@ -9,7 +9,7 @@
 	font-style: normal;
 }
 
-[class*="icon-"] {
+i, .icon {
 	font-family: 'ionicons';
 	speak: none;
 	font-style: normal;
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 41f5d87e50..1856b32664 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -111,8 +111,7 @@
     font-size: 12px;
     line-height: 28px;
 
-    [class^="icon-"], 
-    [class*=" icon-"] {
+    i, .icon {
       margin-top: 1px;
     }
   }
diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss
index 7d8817f285..41b61af6c4 100644
--- a/scss/ionic/_form.scss
+++ b/scss/ionic/_form.scss
@@ -67,7 +67,7 @@ textarea {
     color: $input-label-color;
     font-weight: bold;
   }
-  [class^="icon-"], [class*=" icon-"] {
+  i, .icon {
     @include flex(0, 0, 24px);
     position: static;
     height: auto;
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
index 058b3f631a..06400caa6a 100644
--- a/scss/ionic/_items.scss
+++ b/scss/ionic/_items.scss
@@ -174,7 +174,8 @@ a.item {
 // List Icons
 // -------------------------------
 
-.item i {
+.item i,
+.item .icon {
   @include display-flex();
   @include align-items(center);
   position: absolute;
@@ -190,7 +191,7 @@ a.item {
 .item-icon-left {
   padding-left: ($item-padding * 3);
 
-  i {
+  i, .icon {
     left: $item-padding / 2;
   }
 }
@@ -202,14 +203,17 @@ a.item {
   }
 }
 
-.item-icon-right i {
+.item-icon-right i,
+.item-icon-right .icon {
   right: $item-padding / 2;
 }
 
-.item-icon-left.item-icon-right i:first-child {
+.item-icon-left.item-icon-right i:first-child,
+.item-icon-left.item-icon-right .icon:first-child {
   right: auto;
 }
-.item-icon-left.item-icon-right i:last-child {
+.item-icon-left.item-icon-right i:last-child,
+.item-icon-left.item-icon-right .icon:last-child {
   left: auto;
 }
 
@@ -379,7 +383,7 @@ button.item-icon-right:after {
     height: 100%;
   }
 
-  i {
+  i, .icon {
     color: $brand-danger;
     font-size: 24px;
   }
diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss
index 7ffc89b5f2..4796921fcd 100644
--- a/scss/ionic/_tabs.scss
+++ b/scss/ionic/_tabs.scss
@@ -96,7 +96,8 @@
   line-height: $tabs-text-font-size;
 }
 
-.tab-item i {
+.tab-item i,
+.tab-item .icon {
   display: block;
   margin: 0 auto;
   height: $tabs-icon-size;
@@ -106,7 +107,7 @@
 .tabs-icon-left .tab-item,
 .tabs-icon-right .tab-item {
   font-size: $tabs-text-with-icon-font-size;
-  i {
+  i, .icon {
     font-size: $tabs-icon-size - 8;
     display: inline-block;
     vertical-align: top;
@@ -114,7 +115,8 @@
   }
 }
 
-.tabs-icon-only i {
+.tabs-icon-only i,
+.tabs-icon-only .icon {
   line-height: inherit;
 }