remove <icon forward></icon>

demos/cards/main.html

@@ -38,25 +38,21 @@
     <a ion-item href="#">
       <icon wifi item-left></icon>
       Card Link Item 1
-      <icon forward item-right></icon>
     </a>
 
     <a ion-item href="#">
       <icon wine item-left></icon>
       Card Link Item 2
-      <icon forward item-right></icon>
     </a>
 
     <button ion-item>
       <icon warning item-left></icon>
       Card Button Item 1
-      <icon forward item-right></icon>
     </button>
 
     <button ion-item>
       <icon walk item-left></icon>
       Card Button Item 2
-      <icon forward item-right></icon>
     </button>
 
   </ion-card>

ionic/components/card/modes/ios.scss

@@ -83,11 +83,6 @@ ion-card {
     font-size: 1.3rem;
   }
 
-  icon[forward] {
-    font-size: 2rem;
-    color: $item-ios-forward-icon-color;
-  }
-
   .card-title {
     padding: $card-ios-title-padding;
     font-size: $card-ios-title-font-size;

ionic/components/card/test/basic/main.html

@@ -38,25 +38,21 @@
     <a ion-item href="#">
       <icon wifi item-left></icon>
       Card Link Item 1
-      <icon forward item-right></icon>
     </a>
 
     <a ion-item href="#">
       <icon wine item-left></icon>
       Card Link Item 2
-      <icon forward item-right></icon>
     </a>
 
     <button ion-item>
       <icon warning item-left></icon>
       Card Button Item 1
-      <icon forward item-right></icon>
     </button>
 
     <button ion-item>
       <icon walk item-left></icon>
       Card Button Item 2
-      <icon forward item-right></icon>
     </button>
 
   </ion-card>

ionic/components/icon/icon.scss

@@ -1,4 +1,8 @@
 
+// Icon
+// --------------------------------------------------
+
+
 icon {
   display: inline-block;
   font-size: 1.2em;

ionic/components/icon/icon.ts

@@ -53,10 +53,7 @@ export class Icon {
   onInit() {
     let ele = this.eleRef.nativeElement;
 
-    if (ele.hasAttribute('forward')) {
+    if (this.mode == 'ios' && this.ios) {
-      this.name = this.config.setting('forwardIcon');
-
-    } else if (this.mode == 'ios' && this.ios) {
       this.name = this.ios;
 
     } else if (this.mode == 'md' && this.md) {

ionic/components/icon/modes/ios.scss

@@ -0,0 +1,12 @@
+
+// iOS Icon
+// --------------------------------------------------
+
+
+$icon-forward-ios-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+
+@mixin ios-icon-forward($fg-color) {
+  $svg: str-replace($icon-forward-ios-background-svg, 'fg-color', $fg-color);
+  @include svg-background-image($svg);
+}

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

@@ -77,11 +77,10 @@
       </code>
     </ion-item>
 
-    <ion-item>
+    <ion-item forward-icon>
       <code>
-        &lt;icon forward>&lt;/icon>
+        ion-item w/ [forward-icon] attr. text text text text text text
       </code>
-      <icon forward item-right></icon>
     </ion-item>
 
   </ion-list>

ionic/components/item/modes/ios.scss

@@ -122,11 +122,6 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
     color: $item-ios-note-color;
   }
 
-  icon[forward] {
-    font-size: 2rem;
-    color: $item-ios-forward-icon-color;
-  }
-
   ion-avatar {
     min-width: $item-ios-avatar-size;
 
@@ -148,6 +143,19 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
 
 }
 
+.list,
+.card {
+  button[ion-item]:not([no-forward-icon]),
+  a[ion-item]:not([no-forward-icon]),
+  [forward-icon] {
+    @include ios-icon-forward($item-ios-forward-icon-color);
+    background-repeat: no-repeat;
+    background-position: right ($item-ios-padding-right - 4) center;
+    background-size: 16px 16px;
+    padding-right: 32px;
+  }
+}
+
 
 &.hairlines .list .item {
   margin-top: -0.5px;
@@ -161,4 +169,3 @@ $item-ios-forward-icon-color:     $item-ios-border-color !default;
     border-top-width: 0.55px;
   }
 }
-

ionic/components/item/modes/md.scss

@@ -136,11 +136,6 @@ $item-md-forward-icon-color:     $item-md-border-color !default;
     margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
   }
 
-  icon[forward] {
-    font-size: 2rem;
-    color: $item-md-forward-icon-color;
-  }
-
   ion-avatar {
     min-width: $item-md-avatar-size;
 

ionic/components/item/test/buttons/main.html

@@ -4,22 +4,18 @@
 
   <a ion-item href="#">
     a[ion-item]
-    <icon forward item-right></icon>
   </a>
 
   <a ion-item class="activated" href="#">
     a[ion-item].activated
-    <icon forward item-right></icon>
   </a>
 
   <button ion-item>
     button[ion-item]
-    <icon forward item-right></icon>
   </button>
 
   <button ion-item class="activated">
     button[ion-item].activated
-    <icon forward item-right></icon>
   </button>
 
   <ion-item>

ionic/components/item/test/icons/main.html

@@ -2,19 +2,16 @@
 
 <ion-list>
 
-  <ion-item>
+  <ion-item forward-icon>
-    ion-item forward icon
+    ion-item [forward-icon] attr
-    <icon forward item-right></icon>
   </ion-item>
 
   <a ion-item href="#">
     a[ion-item] w/ forward icon
-    <icon forward item-right></icon>
   </a>
 
   <button ion-item>
     button[ion-item] w/ forward icon
-    <icon forward item-right></icon>
   </button>
 
   <a ion-item href="#">
@@ -37,9 +34,9 @@
     button[ion-item] w/ left side icon
   </button>
 
-  <button ion-item>
+  <button ion-item no-forward-icon>
     <icon flag item-left></icon>
-    button[ion-item] w/ both side icons
+    button[ion-item][no-foward-icon]
     <icon checkmark item-right></icon>
   </button>
 

ionic/components/list/test/inset/main.html

@@ -13,13 +13,11 @@
     <a ion-item href="#">
       <icon alarm item-left></icon>
       List Link Item 1
-      <icon forward item-right></icon>
     </a>
 
     <a ion-item href="#">
       <icon analytics item-left></icon>
       List Link Item 2
-      <icon forward item-right></icon>
     </a>
 
     <ion-switch checked="true">
@@ -33,13 +31,11 @@
     <button ion-item>
       <icon boat item-left></icon>
       List Button Item 1
-      <icon forward item-right></icon>
     </button>
 
     <button ion-item>
       <icon book item-left></icon>
       List Button Item 2
-      <icon forward item-right></icon>
     </button>
 
   </ion-list>

ionic/config/modes.ts

@@ -13,7 +13,6 @@ IonicConfig.modeConfig('ios', {
   backButtonText: 'Back',
   backButtonIcon: 'ion-ios-arrow-back',
 
-  forwardIcon: 'ion-ios-arrow-forward',
   iconMode: 'ios',
 
   tabBarPlacement: 'bottom',
@@ -33,7 +32,6 @@ IonicConfig.modeConfig('md', {
   backButtonText: '',
   backButtonIcon: 'ion-md-arrow-back',
 
-  forwardIcon: '',
   iconMode: 'md',
 
   tabBarPlacement: 'top',

ionic/ionic.ios.scss

@@ -3,6 +3,7 @@
 
 // iOS Components
 @import
+  "components/icon/modes/ios",
   "components/item/modes/ios",
   "components/toolbar/modes/ios",
   "components/action-sheet/modes/ios",

ionic/util/mixins.scss

@@ -105,8 +105,7 @@
 // --------------------------------------------------
 
 @function url-encode($val) {
-  $val: str-replace($val, ' ', '%20');
+  @return str-replace($val, ' ', '%20');
-  @return $val;
 }