fix(icon): isActive="false" with ios mode

fixes #8435

Author: manucorporat

src/components/icon/icon.ts

@@ -106,9 +106,10 @@ export class Icon extends Ion {
     if (!(/^md-|^ios-|^logo-/.test(val))) {
       // this does not have one of the defaults
       // so lets auto add in the mode prefix for them
-      val = this._iconMode + '-' + val;
+      this._name = this._iconMode + '-' + val;
+    } else {
+      this._name = val;
     }
-    this._name = val;
     this.update();
   }
 
@@ -161,34 +162,43 @@ export class Icon extends Ion {
    * @private
    */
   update() {
-    let css = 'ion-';
-
-    this._hidden = (this._name === null);
-
+    let name;
     if (this._ios && this._iconMode === 'ios') {
-      css += this._ios;
-
+      name = this._ios;
     } else if (this._md && this._iconMode === 'md') {
-      css += this._md;
-
+      name = this._md;
     } else {
-      css += this._name;
+      name = this._name;
     }
-
-    if (this._iconMode === 'ios' && !this.isActive && css.indexOf('logo') < 0) {
-      css += '-outline';
+    let hidden = this._hidden = (name === null);
+    if (hidden) {
+      return;
     }
 
-    if (this._css !== css) {
-      if (this._css) {
-        this.setElementClass(this._css, false);
-      }
-      this._css = css;
-      this.setElementClass(css, true);
+    let iconMode = name.split('-', 2)[0];
+    if (
+      iconMode === 'ios' &&
+      !this.isActive &&
+      name.indexOf('logo-') < 0 &&
+      name.indexOf('-outline') < 0) {
+      name += '-outline';
+    }
 
-      this.setElementAttribute('aria-label',
-          css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
+    let css = 'ion-' + name;
+    if (this._css === css) {
+      return;
+    }
+    if (this._css) {
+      this.setElementClass(this._css, false);
     }
+    this._css = css;
+    this.setElementClass(css, true);
+
+    let label = name
+      .replace('ios-', '')
+      .replace('md-', '')
+      .replace('-', ' ');
+    this.setElementAttribute('aria-label', label);
   }
 
 }

src/components/icon/test/basic/main.html

@@ -12,30 +12,37 @@
   <ion-list>
 
     <ion-item>
-      <ion-icon name="home" item-left [color]="dynamicColor"></ion-icon>
+      <ion-icon name="home" [color]="dynamicColor" item-left></ion-icon>
       <code>
         name="home"
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon [name]="homeIcon" item-left></ion-icon>
+      <ion-icon name="home" isActive="true" item-left></ion-icon>
       <code>
-        [name]="homeIcon"
+        name="home" isActive="true"
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon name="home" isActive="true" item-left></ion-icon>
+      <ion-icon [name]="homeIcon" [isActive]="isActive" item-left></ion-icon>
       <code>
-        name="home" isActive="true"
+        [name]="homeIcon" [isActive]="isActive" (false)
       </code>
     </ion-item>
 
     <ion-item>
-      <ion-icon name="home" [isActive]="isActive" item-left></ion-icon>
+      <ion-icon name="md-home" isActive="false" item-left></ion-icon>
       <code>
-        name="home" [isActive]="isActive"
+        name="md-home" isActive="false"
+      </code>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="ios-home" isActive="false" item-left></ion-icon>
+      <code>
+        name="ios-home" isActive="false"
       </code>
     </ion-item>
 
@@ -53,6 +60,13 @@
       </code>
     </ion-item>
 
+    <ion-item>
+      <ion-icon name="ios-home-outline" isActive="false" item-left></ion-icon>
+      <code>
+        name="ios-home-outline" isActive="false"
+      </code>
+    </ion-item>
+
     <ion-item>
       <ion-icon name="md-home" color="primary" item-left></ion-icon>
       <code>
@@ -74,12 +88,34 @@
       </code>
     </ion-item>
 
+    <ion-item>
+      <ion-icon ios="md-color-filter" md="ios-color-filter" item-left></ion-icon>
+      <code>
+        ios="md-color-filter" md="ios-color-filter"
+      </code>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon ios="md-color-filter" md="ios-color-filter" isActive="false" item-left></ion-icon>
+      <code>
+        ios="md-color-filter" md="ios-color-filter" isActive="false"
+      </code>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon item-left></ion-icon>
+      <code>
+        name="null"
+      </code>
+    </ion-item>
+
     <ion-item detail-push>
       <code>
         ion-item w/ [detail-push] attr. text text text text text text
       </code>
     </ion-item>
 
+
   </ion-list>
 
   <p>

src/components/tabs/test/basic/app-module.ts

@@ -237,8 +237,8 @@ export class Tab3 {
       <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1" (ionSelect)="onSelect($event)"></ion-tab>
       <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
       <ion-tab tabTitle="Stopwatch" tabIcon="logo-facebook" [root]="root3"></ion-tab>
-      <ion-tab tabTitle="Messages" tabIcon="chatboxes" [root]="root1"></ion-tab>
-      <ion-tab tabTitle="My Profile" tabIcon="person" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Messages" tabIcon="md-chatboxes" [root]="root1"></ion-tab>
+      <ion-tab tabTitle="My Profile" tabIcon="ios-person" [root]="root2"></ion-tab>
     </ion-tabs>
   `
 })