diff --git a/demos/cards/main.html b/demos/cards/main.html
index 614186d229..7f873bceb2 100644
--- a/demos/cards/main.html
+++ b/demos/cards/main.html
@@ -38,27 +38,23 @@
Card Link Item 1
-
Card Link Item 2
-
-
\ No newline at end of file
+
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index ec55188b04..a48b0ebdbc 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/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;
diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html
index c4707bb112..afcac6f52c 100644
--- a/ionic/components/card/test/basic/main.html
+++ b/ionic/components/card/test/basic/main.html
@@ -38,25 +38,21 @@
Card Link Item 1
-
Card Link Item 2
-
diff --git a/ionic/components/icon/icon.scss b/ionic/components/icon/icon.scss
index 1c93ea46a7..f0823cb9a7 100644
--- a/ionic/components/icon/icon.scss
+++ b/ionic/components/icon/icon.scss
@@ -1,4 +1,8 @@
+// Icon
+// --------------------------------------------------
+
+
icon {
display: inline-block;
font-size: 1.2em;
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 9926b160b4..e489ab74ff 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -53,10 +53,7 @@ export class Icon {
onInit() {
let ele = this.eleRef.nativeElement;
- if (ele.hasAttribute('forward')) {
- this.name = this.config.setting('forwardIcon');
-
- } else if (this.mode == 'ios' && this.ios) {
+ if (this.mode == 'ios' && this.ios) {
this.name = this.ios;
} else if (this.mode == 'md' && this.md) {
diff --git a/ionic/components/icon/modes/ios.scss b/ionic/components/icon/modes/ios.scss
new file mode 100644
index 0000000000..64a8de114c
--- /dev/null
+++ b/ionic/components/icon/modes/ios.scss
@@ -0,0 +1,12 @@
+
+// iOS Icon
+// --------------------------------------------------
+
+
+$icon-forward-ios-background-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);
+}
diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html
index 7f94ed6db8..9aecc23dac 100644
--- a/ionic/components/icon/test/basic/main.html
+++ b/ionic/components/icon/test/basic/main.html
@@ -77,11 +77,10 @@
-
+
- <icon forward></icon>
+ ion-item w/ [forward-icon] attr. text text text text text text
-
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 4fd9c46aec..e0b71ff223 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/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;
}
}
-
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 74c2fda56b..fbec5ff56a 100644
--- a/ionic/components/item/modes/md.scss
+++ b/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;
diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
index c695a1449a..2810fb108c 100644
--- a/ionic/components/item/test/buttons/main.html
+++ b/ionic/components/item/test/buttons/main.html
@@ -4,22 +4,18 @@
a[ion-item]
-
a[ion-item].activated
-
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index 1156ee57d9..895c224360 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -2,19 +2,16 @@
-
- ion-item forward icon
-
+
+ ion-item [forward-icon] attr
a[ion-item] w/ forward icon
-
@@ -37,9 +34,9 @@
button[ion-item] w/ left side icon
-
diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts
index 15942f0b95..6411ca3c88 100644
--- a/ionic/config/modes.ts
+++ b/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',
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index e12ea9884f..bd4b3c0365 100644
--- a/ionic/ionic.ios.scss
+++ b/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",
diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss
index e69a6660d4..8c2aba2019 100644
--- a/ionic/util/mixins.scss
+++ b/ionic/util/mixins.scss
@@ -105,8 +105,7 @@
// --------------------------------------------------
@function url-encode($val) {
- $val: str-replace($val, ' ', '%20');
- @return $val;
+ @return str-replace($val, ' ', '%20');
}