diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index b71586fe14..ac4d172d62 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Attribute, Renderer} from 'angular2/core';
+import {Directive, Input, ElementRef, Renderer} from 'angular2/core';
import {Config} from '../../config/config';
@@ -16,7 +16,7 @@ import {Config} from '../../config/config';
*
*
*
- *
+ *
* ```
*
* @property {string} [name] - Use the appropriate icon for the mode.
@@ -47,6 +47,10 @@ export class Icon {
private _renderer: Renderer
) {
this.mode = config.get('iconMode');
+ this._name = '';
+ this._ios = '';
+ this._md = '';
+ this._css = '';
if (_elementRef.nativeElement.tagName === 'ICON') {
// deprecated warning
@@ -59,30 +63,51 @@ export class Icon {
/**
* @private
*/
- ngOnInit() {
- if (this.mode == 'ios' && this.ios) {
- this.name = this.ios;
+ get name() {
+ return this._name;
+ }
- } else if (this.mode == 'md' && this.md) {
- this.name = this.md;
+ /**
+ * @private
+ */
+ set name(val) {
+ 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.mode + '-' + val;
}
-
- if (!this.name) return;
-
- if (!(/^ion-/.test(this.name))) {
- // not an exact icon being used
- // add mode specific prefix
- this.name = 'ion-' + this.mode + '-' + this.name;
- }
-
+ this._name = val;
this.update();
}
/**
* @private
*/
- addClass(className) {
- this._renderer.setElementClass(this._elementRef, className, true);
+ get ios() {
+ return this._ios;
+ }
+
+ /**
+ * @private
+ */
+ set ios(val) {
+ this._ios = val;
+ this.update();
+ }
+
+ /**
+ * @private
+ */
+ get md() {
+ return this._md;
+ }
+
+ /**
+ * @private
+ */
+ set md(val) {
+ this._md = val;
+ this.update();
}
get isActive() {
@@ -101,29 +126,39 @@ export class Icon {
* @private
*/
update() {
- if (this.name && this.mode == 'ios') {
+ let css = 'ion-';
- if (this.isActive) {
- if (/-outline/.test(this.name)) {
- this.name = this.name.replace('-outline', '');
- }
+ if (this._ios && this.mode === 'ios') {
+ css += this._ios;
- } else if (!(/-outline/.test(this.name))) {
- this.name += '-outline';
- }
+ } else if (this._md && this.mode === 'md') {
+ css += this._md;
+ } else {
+ css += this._name;
}
- if (this._name !== this.name) {
- if (this._name) {
- this._renderer.setElementClass(this._elementRef, this._name, false);
+ if (this.mode == 'ios' && !this.isActive) {
+ css += '-outline';
+ }
+
+ if (this._css !== css) {
+ if (this._css) {
+ this._renderer.setElementClass(this._elementRef, this._css, false);
}
- this._name = this.name;
- this._renderer.setElementClass(this._elementRef, this.name, true);
+ this._css = css;
+ this._renderer.setElementClass(this._elementRef, css, true);
this._renderer.setElementAttribute(this._elementRef, 'aria-label',
- this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
+ css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
}
}
+ /**
+ * @private
+ */
+ addClass(className) {
+ this._renderer.setElementClass(this._elementRef, className, true);
+ }
+
}
diff --git a/ionic/components/icon/test/basic/index.ts b/ionic/components/icon/test/basic/index.ts
index 6c9d982ab9..a1708bf7f6 100644
--- a/ionic/components/icon/test/basic/index.ts
+++ b/ionic/components/icon/test/basic/index.ts
@@ -8,10 +8,24 @@ class E2EApp {
constructor() {
this.homeIcon = 'home';
this.isActive = false;
- this.btnIcon = 'home';
+
+ this.iconIndex = 0;
+ this.icons = [
+ 'home',
+ 'star',
+ 'ios-alert',
+ 'ios-alert-outline',
+ 'md-alert',
+ 'apple-logo'
+ ];
+ this.btnIcon = this.icons[0];
}
updateIcon() {
- this.btnIcon = (this.btnIcon === 'home' ? 'star' : 'home');
+ this.iconIndex++;
+ if (this.iconIndex >= this.icons.length) {
+ this.iconIndex = 0;
+ }
+ this.btnIcon = this.icons[this.iconIndex];
}
}
diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html
index 28533f8df3..a02efe212a 100644
--- a/ionic/components/icon/test/basic/main.html
+++ b/ionic/components/icon/test/basic/main.html
@@ -10,49 +10,63 @@
- <ion-icon name="home"></ion-icon>
+ name="home"
- <ion-icon [name]="homeIcon"></ion-icon>
+ [name]="homeIcon"
-
+
- <ion-icon name="ion-social-twitter"></ion-icon>
+ name="home" isActive="true"
-
+
- <ion-icon ios="ion-social-apple" md="ion-social-android"></ion-icon>
+ name="home" [isActive]="isActive"
-
+
- <ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android"></ion-icon>
+ name="ios-home"
-
+
- <ion-icon ios="ion-social-apple"></ion-icon>
+ name="ios-home-outline"
-
+
- <ion-icon md="ion-social-android"></ion-icon>
+ name="md-home"
+
+
+
+
+
+
+ name="twitter-logo"
+
+
+
+
+
+
+ ios="apple-logo" md="android-logo"
diff --git a/ionic/fonts/ionicons-icons.scss b/ionic/fonts/ionicons-icons.scss
index 98262c9e8e..84e12a26c0 100644
--- a/ionic/fonts/ionicons-icons.scss
+++ b/ionic/fonts/ionicons-icons.scss
@@ -2,6 +2,27 @@
// Ionicons Icon Font CSS
// --------------------------
+.ion-android-logo:before { content: "\f225"; }
+.ion-angular-logo:before { content: "\f227"; }
+.ion-apple-logo:before { content: "\f229"; }
+.ion-bitcoin-logo:before { content: "\f22b"; }
+.ion-buffer-logo:before { content: "\f22d"; }
+.ion-chrome-logo:before { content: "\f22f"; }
+.ion-codepen-logo:before { content: "\f230"; }
+.ion-css3-logo:before { content: "\f231"; }
+.ion-designernews-logo:before { content: "\f232"; }
+.ion-dribbble-logo:before { content: "\f233"; }
+.ion-dropbox-logo:before { content: "\f234"; }
+.ion-euro-logo:before { content: "\f235"; }
+.ion-facebook-logo:before { content: "\f236"; }
+.ion-foursquare-logo:before { content: "\f237"; }
+.ion-freebsd-devil-logo:before { content: "\f238"; }
+.ion-github-logo:before { content: "\f239"; }
+.ion-google-logo:before { content: "\f23a"; }
+.ion-googleplus-logo:before { content: "\f23b"; }
+.ion-hackernews-logo:before { content: "\f23c"; }
+.ion-html5-logo:before { content: "\f23d"; }
+.ion-instagram-logo:before { content: "\f23e"; }
.ion-ios-add:before { content: "\f102"; }
.ion-ios-add-circle:before { content: "\f101"; }
.ion-ios-add-circle-outline:before { content: "\f100"; }
@@ -588,6 +609,9 @@
.ion-ios-wine-outline:before { content: "\f26e"; }
.ion-ios-woman:before { content: "\f271"; }
.ion-ios-woman-outline:before { content: "\f270"; }
+.ion-javascript-logo:before { content: "\f23f"; }
+.ion-linkedin-logo:before { content: "\f240"; }
+.ion-markdown-logo:before { content: "\f241"; }
.ion-md-add:before { content: "\f273"; }
.ion-md-add-circle:before { content: "\f272"; }
.ion-md-alarm:before { content: "\f274"; }
@@ -888,51 +912,27 @@
.ion-md-wifi:before { content: "\f3a8"; }
.ion-md-wine:before { content: "\f3a9"; }
.ion-md-woman:before { content: "\f3aa"; }
-.ion-social-android:before { content: "\f225"; }
-.ion-social-angular:before { content: "\f4d9"; }
-.ion-social-apple:before { content: "\f227"; }
-.ion-social-bitcoin:before { content: "\f2af"; }
-.ion-social-buffer:before { content: "\f229"; }
-.ion-social-chrome:before { content: "\f4db"; }
-.ion-social-codepen:before { content: "\f4dd"; }
-.ion-social-css3:before { content: "\f4df"; }
-.ion-social-designernews:before { content: "\f22b"; }
-.ion-social-dribbble:before { content: "\f22d"; }
-.ion-social-dropbox:before { content: "\f22f"; }
-.ion-social-euro:before { content: "\f4e1"; }
-.ion-social-facebook:before { content: "\f231"; }
-.ion-social-foursquare:before { content: "\f34d"; }
-.ion-social-freebsd-devil:before { content: "\f2c4"; }
-.ion-social-github:before { content: "\f233"; }
-.ion-social-google:before { content: "\f34f"; }
-.ion-social-googleplus:before { content: "\f235"; }
-.ion-social-hackernews:before { content: "\f237"; }
-.ion-social-html5:before { content: "\f4e3"; }
-.ion-social-instagram:before { content: "\f351"; }
-.ion-social-javascript:before { content: "\f4e5"; }
-.ion-social-linkedin:before { content: "\f239"; }
-.ion-social-markdown:before { content: "\f4e6"; }
-.ion-social-nodejs:before { content: "\f4e7"; }
-.ion-social-octocat:before { content: "\f4e8"; }
-.ion-social-pinterest:before { content: "\f2b1"; }
-.ion-social-playstation:before { content: "\f3ab"; }
-.ion-social-python:before { content: "\f4e9"; }
-.ion-social-reddit:before { content: "\f23b"; }
-.ion-social-rss:before { content: "\f23d"; }
-.ion-social-sass:before { content: "\f4ea"; }
-.ion-social-skype:before { content: "\f23f"; }
-.ion-social-snapchat:before { content: "\f4ec"; }
-.ion-social-steam:before { content: "\f3ac"; }
-.ion-social-tumblr:before { content: "\f241"; }
-.ion-social-tux:before { content: "\f2c5"; }
-.ion-social-twitch:before { content: "\f4ee"; }
-.ion-social-twitter:before { content: "\f243"; }
-.ion-social-usd:before { content: "\f353"; }
-.ion-social-vimeo:before { content: "\f245"; }
-.ion-social-whatsapp:before { content: "\f4f0"; }
-.ion-social-windows:before { content: "\f247"; }
-.ion-social-wordpress:before { content: "\f249"; }
-.ion-social-xbox:before { content: "\f3ad"; }
-.ion-social-yahoo:before { content: "\f24b"; }
-.ion-social-yen:before { content: "\f4f2"; }
-.ion-social-youtube:before { content: "\f24d"; }
\ No newline at end of file
+.ion-nodejs-logo:before { content: "\f242"; }
+.ion-octocat-logo:before { content: "\f243"; }
+.ion-pinterest-logo:before { content: "\f244"; }
+.ion-playstation-logo:before { content: "\f245"; }
+.ion-python-logo:before { content: "\f246"; }
+.ion-reddit-logo:before { content: "\f247"; }
+.ion-rss-logo:before { content: "\f248"; }
+.ion-sass-logo:before { content: "\f249"; }
+.ion-skype-logo:before { content: "\f24a"; }
+.ion-snapchat-logo:before { content: "\f24b"; }
+.ion-steam-logo:before { content: "\f24c"; }
+.ion-tumblr-logo:before { content: "\f24d"; }
+.ion-tux-logo:before { content: "\f2ae"; }
+.ion-twitch-logo:before { content: "\f2af"; }
+.ion-twitter-logo:before { content: "\f2b0"; }
+.ion-usd-logo:before { content: "\f2b1"; }
+.ion-vimeo-logo:before { content: "\f2c4"; }
+.ion-whatsapp-logo:before { content: "\f2c5"; }
+.ion-windows-logo:before { content: "\f32f"; }
+.ion-wordpress-logo:before { content: "\f330"; }
+.ion-xbox-logo:before { content: "\f34c"; }
+.ion-yahoo-logo:before { content: "\f34d"; }
+.ion-yen-logo:before { content: "\f34e"; }
+.ion-youtube-logo:before { content: "\f34f"; }
\ No newline at end of file
diff --git a/ionic/fonts/ionicons.ttf b/ionic/fonts/ionicons.ttf
index c0e395afba..ba29a415af 100644
Binary files a/ionic/fonts/ionicons.ttf and b/ionic/fonts/ionicons.ttf differ
diff --git a/ionic/fonts/ionicons.woff b/ionic/fonts/ionicons.woff
index 42a4c6c7ed..9533869f47 100644
Binary files a/ionic/fonts/ionicons.woff and b/ionic/fonts/ionicons.woff differ