javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(icon): rename icon to ion-icon

Browse Source 
Closes #855
This commit is contained in:
Adam Bradley
2016-01-05 22:27:04 -06:00
parent 8987e4b932
commit 883e1b68b1
62 changed files with 307 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/action-sheet/action-sheet.ios.scss
View File

@ -21,6 +21,7 @@ $action-sheet-ios-button-border-color: #d1d3d6 !default;
$action-sheet-ios-button-background-active-color: #e9e9e9 !default; $action-sheet-ios-button-background-active-color: #e9e9e9 !default;
$action-sheet-ios-destructive-button-text-color: #f53d3d !default; $action-sheet-ios-destructive-button-text-color: #f53d3d !default;
$action-sheet-ios-cancel-button-background-color: #fff !default;
ion-action-sheet { ion-action-sheet {
@ -78,6 +79,7 @@ ion-action-sheet {
.action-sheet-cancel { .action-sheet-cancel {
font-weight: bold; font-weight: bold;
background: $action-sheet-ios-cancel-button-background-color;
} }
&.hairlines { &.hairlines {

4
ionic/components/action-sheet/action-sheet.ts
View File

@ -134,13 +134,13 @@ import {Animation} from '../../animations/animation';
'<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' + '<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' + '<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' + '<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
'<icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></icon> ' + '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
'{{b.text}}' + '{{b.text}}' +
'</button>' + '</button>' +
'</div>' + '</div>' +
'<div class="action-sheet-group" *ngIf="d.cancelButton">' + '<div class="action-sheet-group" *ngIf="d.cancelButton">' +
'<button (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' + '<button (click)="click(d.cancelButton)" class="action-sheet-button action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">' +
'<icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></icon> ' + '<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon> ' +
'{{d.cancelButton.text}}' + '{{d.cancelButton.text}}' +
'</button>' + '</button>' +
'</div>' + '</div>' +

2
ionic/components/button/button-fab.scss
View File

@ -24,7 +24,7 @@ $button-fab-size: 56px !default;
font-size: 14px; font-size: 14px;
icon { ion-icon {
flex: 1; flex: 1;
font-size: 2.8rem; font-size: 2.8rem;
} }

6
ionic/components/button/button-icon.scss
View File

@ -4,14 +4,14 @@
// -------------------------------------------------- // --------------------------------------------------
.button-icon-left icon { .button-icon-left ion-icon {
padding-right: 0.3em; padding-right: 0.3em;
font-size: 1.4em; font-size: 1.4em;
line-height: 0.67; line-height: 0.67;
pointer-events: none; pointer-events: none;
} }
.button-icon-right icon { .button-icon-right ion-icon {
padding-left: 0.4em; padding-left: 0.4em;
font-size: 1.4em; font-size: 1.4em;
line-height: 0.67; line-height: 0.67;
@ -22,7 +22,7 @@
padding: 0; padding: 0;
min-width: 0.9em; min-width: 0.9em;
icon { ion-icon {
padding: 0 0.5em; padding: 0 0.5em;
font-size: 1.8em; font-size: 1.8em;
line-height: 0.67; line-height: 0.67;

2
ionic/components/button/button.ios.scss
View File

@ -85,7 +85,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
font-size: $button-ios-small-font-size; font-size: $button-ios-small-font-size;
} }
.button-small.button-icon-only icon { .button-small.button-icon-only ion-icon {
font-size: $button-ios-small-icon-font-size; font-size: $button-ios-small-icon-font-size;
} }

2
ionic/components/button/button.md.scss
View File

@ -104,7 +104,7 @@ $button-md-small-icon-font-size: 1.4em !default;
font-size: $button-md-small-font-size; font-size: $button-md-small-font-size;
} }
.button-small.button-icon-only icon { .button-small.button-icon-only ion-icon {
font-size: $button-md-small-icon-font-size; font-size: $button-md-small-icon-font-size;
} }

4
ionic/components/button/button.ts
View File

@ -123,12 +123,12 @@ export class Button {
} }
} else if (childNode.nodeType === 1) { } else if (childNode.nodeType === 1) {
if (childNode.nodeName === 'ICON') { if (childNode.nodeName === 'ION-ICON') {
// icon element node // icon element node
nodes.push(ICON); nodes.push(ICON);
} else { } else {
// element other than an <icon> // element other than an <ion-icon>
nodes.push(TEXT); nodes.push(TEXT);
} }
} }

4
ionic/components/button/test/block/main.html
View File

@ -11,8 +11,8 @@
</p> </p>
<p> <p>
<a button block href="#"><icon help-circle></icon> a[button][block] icon</a> <a button block href="#"><ion-icon name="help-circle"></ion-icon> a[button][block] icon</a>
<button block><icon help-circle></icon> button[block] icon</button> <button block><ion-icon name="help-circle"></ion-icon> button[block] icon</button>
</p> </p>
<p> <p>

12
ionic/components/button/test/fab/main.html
View File

@ -1,24 +1,24 @@
<button fab fab-left fab-top> <button fab fab-left fab-top>
<icon add></icon> <ion-icon name="add"></ion-icon>
</button> </button>
<button fab fab-center fab-top secondary> <button fab fab-center fab-top secondary>
<icon add></icon> <ion-icon name="add"></ion-icon>
</button> </button>
<button fab fab-right fab-top danger> <button fab fab-right fab-top danger>
<icon add></icon> <ion-icon name="add"></ion-icon>
</button> </button>
<button fab fab-left fab-bottom light> <button fab fab-left fab-bottom light>
<icon add></icon> <ion-icon name="add"></ion-icon>
</button> </button>
<button fab fab-center fab-bottom primary> <button fab fab-center fab-bottom primary>
<icon add></icon> <ion-icon name="add"></ion-icon>
</button> </button>
<button fab fab-right fab-bottom dark> <button fab fab-right fab-bottom dark>
<icon add></icon> <ion-icon name="add"></ion-icon>
</button> </button>

36
ionic/components/button/test/icons/main.html
View File

@ -7,11 +7,11 @@
<div> <div>
<button> <button>
<icon home></icon> <ion-icon name="home"></ion-icon>
Left Icon Left Icon
</button> </button>
<a button> <a button>
<icon home></icon> <ion-icon name="home"></ion-icon>
Left Icon Left Icon
</a> </a>
</div> </div>
@ -19,30 +19,30 @@
<div> <div>
<button> <button>
Right Icon Right Icon
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
<a button> <a button>
Right Icon Right Icon
<icon star></icon> <ion-icon name="star"></ion-icon>
</a> </a>
</div> </div>
<div> <div>
<button> <button>
<icon flag></icon> <ion-icon name="flag"></ion-icon>
</button> </button>
<a button> <a button>
<icon flag></icon> <ion-icon name="flag"></ion-icon>
</a> </a>
</div> </div>
<div> <div>
<button large> <button large>
<icon help-circle></icon> <ion-icon name="help-circle"></ion-icon>
Left, Large Left, Large
</button> </button>
<a button large> <a button large>
<icon help-circle></icon> <ion-icon name="help-circle"></ion-icon>
Left, Large Left, Large
</a> </a>
</div> </div>
@ -50,30 +50,30 @@
<div> <div>
<button large> <button large>
Right, Large Right, Large
<icon settings></icon> <ion-icon name="settings"></ion-icon>
</button> </button>
<a button large> <a button large>
Right, Large Right, Large
<icon settings></icon> <ion-icon name="settings"></ion-icon>
</a> </a>
</div> </div>
<div> <div>
<button large> <button large>
<icon heart></icon> <ion-icon name="heart"></ion-icon>
</button> </button>
<a button large> <a button large>
<icon heart></icon> <ion-icon name="heart"></ion-icon>
</a> </a>
</div> </div>
<div> <div>
<button small> <button small>
<icon checkmark></icon> <ion-icon name="checkmark"></ion-icon>
Left, Small Left, Small
</button> </button>
<a button small> <a button small>
<icon checkmark></icon> <ion-icon name="checkmark"></ion-icon>
Left, Small Left, Small
</a> </a>
</div> </div>
@ -81,20 +81,20 @@
<div> <div>
<button small> <button small>
Right, Small Right, Small
<icon arrow-forward></icon> <ion-icon name="arrow-forward"></ion-icon>
</button> </button>
<a button small> <a button small>
Right, Small Right, Small
<icon arrow-forward></icon> <ion-icon name="arrow-forward"></ion-icon>
</a> </a>
</div> </div>
<div> <div>
<button small> <button small>
<icon search></icon> <ion-icon name="search"></ion-icon>
</button> </button>
<a button small> <a button small>
<icon search></icon> <ion-icon name="search"></ion-icon>
</a> </a>
</div> </div>

16
ionic/components/card/test/advanced/main.html
View File

@ -22,13 +22,13 @@
<ion-row no-padding> <ion-row no-padding>
<ion-col> <ion-col>
<button clear small> <button clear small>
<icon star></icon> <ion-icon name="star"></ion-icon>
Star Star
</button> </button>
</ion-col> </ion-col>
<ion-col text-right> <ion-col text-right>
<button clear small class="activated"> <button clear small class="activated">
<icon share></icon> <ion-icon name="share"></ion-icon>
Share.activated Share.activated
</button> </button>
</ion-col> </ion-col>
@ -58,17 +58,17 @@
<ion-row no-padding> <ion-row no-padding>
<ion-col> <ion-col>
<button clear small> <button clear small>
<icon star></icon> <ion-icon name="star"></ion-icon>
Favorite Favorite
</button> </button>
<button clear small> <button clear small>
<icon musical-notes></icon> <ion-icon name="musical-notes"></ion-icon>
Listen Listen
</button> </button>
</ion-col> </ion-col>
<ion-col text-right> <ion-col text-right>
<button clear small danger class="activated"> <button clear small danger class="activated">
<icon share></icon> <ion-icon name="share"></ion-icon>
Share.activated Share.activated
</button> </button>
</ion-col> </ion-col>
@ -88,20 +88,20 @@
<ion-row text-center no-padding> <ion-row text-center no-padding>
<ion-col> <ion-col>
<button clear small dark> <button clear small dark>
<icon star></icon> <ion-icon name="star"></ion-icon>
Favorite Favorite
</button> </button>
</ion-col> </ion-col>
<ion-col> <ion-col>
<button clear small dark> <button clear small dark>
<icon musical-notes></icon> <ion-icon name="musical-notes"></ion-icon>
Listen Listen
</button> </button>
</ion-col> </ion-col>
<ion-col> <ion-col>
<button clear small dark> <button clear small dark>
<icon share-alt></icon> <ion-icon name="share-alt"></ion-icon>
Share Share
</button> </button>
</ion-col> </ion-col>

10
ionic/components/card/test/basic/main.html
View File

@ -20,7 +20,7 @@
<ion-card> <ion-card>
<ion-item> <ion-item>
<icon pin item-left></icon> <ion-icon name="pin" item-left></ion-icon>
ion-item in a card, icon left, button right ion-item in a card, icon left, button right
<button outline item-right>View</button> <button outline item-right>View</button>
</ion-item> </ion-item>
@ -36,22 +36,22 @@
<ion-card> <ion-card>
<a ion-item href="#" class="activated"> <a ion-item href="#" class="activated">
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Card Link Item 1 .activated Card Link Item 1 .activated
</a> </a>
<a ion-item href="#"> <a ion-item href="#">
<icon wine item-left></icon> <ion-icon name="wine" item-left></ion-icon>
Card Link Item 2 Card Link Item 2
</a> </a>
<button ion-item class="activated"> <button ion-item class="activated">
<icon warning item-left></icon> <ion-icon name="warning" item-left></ion-icon>
Card Button Item 1 .activated Card Button Item 1 .activated
</button> </button>
<button ion-item> <button ion-item>
<icon walk item-left></icon> <ion-icon name="walk" item-left></ion-icon>
Card Button Item 2 Card Button Item 2
</button> </button>

18
ionic/components/card/test/list/main.html
View File

@ -12,12 +12,12 @@
</ion-list-header> </ion-list-header>
<ion-toggle> <ion-toggle>
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Wifi Wifi
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon heart item-left></icon> <ion-icon name="heart" item-left></ion-icon>
Affection Affection
<ion-note item-right> <ion-note item-right>
Very Little Very Little
@ -25,7 +25,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home item-left></icon> <ion-icon name="home" item-left></ion-icon>
Home Home
<ion-note item-right> <ion-note item-right>
Where the heart is Where the heart is
@ -45,12 +45,12 @@
</ion-list-header> </ion-list-header>
<ion-toggle> <ion-toggle>
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Wifi Wifi
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon heart item-left></icon> <ion-icon name="heart" item-left></ion-icon>
Affection Affection
<ion-note item-right> <ion-note item-right>
Very Little Very Little
@ -58,7 +58,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home item-left></icon> <ion-icon name="home" item-left></ion-icon>
Home Home
<ion-note item-right> <ion-note item-right>
Where the heart is Where the heart is
@ -76,12 +76,12 @@
</ion-card-header> </ion-card-header>
<ion-toggle> <ion-toggle>
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Wifi Wifi
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon heart item-left></icon> <ion-icon name="heart" item-left></ion-icon>
Affection Affection
<ion-note item-right> <ion-note item-right>
Very Little Very Little
@ -89,7 +89,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home item-left></icon> <ion-icon name="home" item-left></ion-icon>
Home Home
<ion-note item-right> <ion-note item-right>
Where the heart is Where the heart is

2
ionic/components/checkbox/test/basic/main.html
View File

@ -36,7 +36,7 @@
</form> </form>
<p aria-hidden="true" class="align-center"> <p aria-hidden="true" text-center>
<button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button> <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
<button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button> <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
<button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button> <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>

4
ionic/components/icon/icon.scss
View File

@ -4,11 +4,11 @@
// -------------------------------------------------- // --------------------------------------------------
icon { ion-icon {
display: inline-block; display: inline-block;
font-size: 1.2em; font-size: 1.2em;
} }
icon[small] { ion-icon[small] {
font-size: 1.1em; font-size: 1.1em;
} }

48
ionic/components/icon/icon.ts
View File

@ -6,18 +6,20 @@ import {Config} from '../../config/config';
/** /**
* @name Icon * @name Icon
* @description * @description
* Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, * Icons can be used on their own, or inside of a number of Ionic components.
* check out the [Ionicons resource docs](../../../../resources/ionicons). * For a full list of available icons, check out the
* [Ionicons resource docs](../../../../resources/ionicons).
* *
* @usage * @usage
* ```html * ```html
* <!-- use the appropriate home icon for ios and md --> * <!-- use the appropriate star icon for ios and md -->
* <icon home></icon> * <ion-icon name="star"></ion-icon>
* *
* <!-- explicity set the icon for each platform --> * <!-- explicity set the icon for each platform -->
* <icon ios="ion-ios-home" md="ion-md-home"></icon> * <ion-icon ios="ion-ios-home" md="ion-md-home"></ion-icon>
* ``` * ```
* *
* @property {string} [name] - Use the appropriate icon for the mode.
* @property {boolean} [isActive] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon. * @property {boolean} [isActive] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
* If there is not an outlined version for the particular icon, it will use the default (full) version. * If there is not an outlined version for the particular icon, it will use the default (full) version.
* @property {string} [ios] - Explicitly set the icon to use on iOS. * @property {string} [ios] - Explicitly set the icon to use on iOS.
@ -26,7 +28,7 @@ import {Config} from '../../config/config';
* *
*/ */
@Directive({ @Directive({
selector: 'icon', selector: 'ion-icon,icon',
inputs: [ inputs: [
'name', 'name',
'ios', 'ios',
@ -40,42 +42,29 @@ import {Config} from '../../config/config';
export class Icon { export class Icon {
constructor( constructor(
private _elementRef: ElementRef,
config: Config, config: Config,
private _elementRef: ElementRef,
private _renderer: Renderer private _renderer: Renderer
) { ) {
this.config = config;
this.mode = config.get('iconMode'); this.mode = config.get('iconMode');
}
/** if (_elementRef.nativeElement.tagName === 'ICON') {
* @private // deprecated warning
*/ console.warn('<icon> has been renamed to <ion-icon>');
addClass(className) { console.warn('<ion-icon> requires the "name" attribute w/ a value');
this._renderer.setElementClass(this._elementRef, className, true); console.warn('<ion-icon name="home"></ion-icon> should now be <ion-icon name="home"></ion-icon>');
}
} }
/** /**
* @private * @private
*/ */
ngOnInit() { ngOnInit() {
let ele = this._elementRef.nativeElement;
if (this.mode == 'ios' && this.ios) { if (this.mode == 'ios' && this.ios) {
this.name = this.ios; this.name = this.ios;
} else if (this.mode == 'md' && this.md) { } else if (this.mode == 'md' && this.md) {
this.name = this.md; this.name = this.md;
} else if (!this.name) {
// looping through native dom attributes, eww
// https://github.com/angular/angular/issues/1818
for (let i = 0, l = ele.attributes.length; i < l; i++) {
if (ele.attributes[i].value === '' && /_|item-|isActive|large|small|class/.test(ele.attributes[i].name) !== true) {
this.name = ele.attributes[i].name;
break;
}
}
} }
if (!this.name) return; if (!this.name) return;
@ -89,6 +78,13 @@ export class Icon {
this.update(); this.update();
} }
/**
* @private
*/
addClass(className) {
this._renderer.setElementClass(this._elementRef, className, true);
}
get isActive() { get isActive() {
return (this._isActive === undefined || this._isActive === true || this._isActive === 'true'); return (this._isActive === undefined || this._isActive === true || this._isActive === 'true');
} }

49
ionic/components/icon/test/basic/main.html
View File

@ -8,72 +8,51 @@
<ion-list> <ion-list>
<ion-item> <ion-item>
<icon home item-left></icon> <ion-icon name="home" item-left></ion-icon>
<code> <code>
&lt;icon home>&lt;/icon> &lt;ion-icon name="home">&lt;/ion-icon>
</code> </code>
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home isActive="true" item-left></icon> <ion-icon [name]="homeIcon" item-left></ion-icon>
<code> <code>
&lt;icon home isActive="true">&lt;/icon> &lt;ion-icon [name]="homeIcon">&lt;/ion-icon>
</code> </code>
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home isActive="false" item-left></icon> <ion-icon name="ion-social-twitter" item-left></ion-icon>
<code> <code>
&lt;icon home isActive="false">&lt;/icon> &lt;ion-icon name="ion-social-twitter">&lt;/ion-icon>
</code> </code>
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon name="home" item-left></icon> <ion-icon ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
<code> <code>
&lt;icon name="home">&lt;/icon> &lt;ion-icon ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
</code> </code>
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon [name]="homeIcon" item-left></icon> <ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
<code> <code>
&lt;icon [name]="homeIcon">&lt;/icon> &lt;ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
</code> </code>
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon ion-social-twitter item-left></icon> <ion-icon ios="ion-social-apple" item-left></ion-icon>
<code> <code>
&lt;icon ion-social-twitter>&lt;/icon> &lt;ion-icon ios="ion-social-apple">&lt;/ion-icon>
</code> </code>
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon ios="ion-social-apple" md="ion-social-android" item-left></icon> <ion-icon md="ion-social-android" item-left></ion-icon>
<code> <code>
&lt;icon ios="ion-social-apple" md="ion-social-android">&lt;/icon> &lt;ion-icon md="ion-social-android">&lt;/ion-icon>
</code>
</ion-item>
<ion-item>
<icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></icon>
<code>
&lt;icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon ios="ion-social-apple" item-left></icon>
<code>
&lt;icon ios="ion-social-apple">&lt;/icon>
</code>
</ion-item>
<ion-item>
<icon md="ion-social-android" item-left></icon>
<code>
&lt;icon md="ion-social-android">&lt;/icon>
</code> </code>
</ion-item> </ion-item>

12
ionic/components/item/item-media.scss
View File

@ -4,19 +4,19 @@
// -------------------------------------------------- // --------------------------------------------------
// Icons, avatars, thumbnails, notes, etc. // Icons, avatars, thumbnails, notes, etc.
.item > icon[small]:first-child, .item > ion-icon[small]:first-child,
.item-inner > icon[small]:first-child { .item-inner > ion-icon[small]:first-child {
min-width: 18px; min-width: 18px;
} }
.item > icon:first-child, .item > ion-icon:first-child,
.item-inner > icon:first-child { .item-inner > ion-icon:first-child {
min-width: 24px; min-width: 24px;
text-align: center; text-align: center;
} }
.item > icon, .item > ion-icon,
.item-inner > icon { .item-inner > ion-icon {
line-height: 1; line-height: 1;
font-size: 2.4rem; font-size: 2.4rem;
min-height: 2.4rem; min-height: 2.4rem;

2
ionic/components/item/item.ios.scss
View File

@ -121,7 +121,7 @@ ion-thumbnail[item-right] {
min-height: 25px; min-height: 25px;
} }
.button-icon-only icon, .button-icon-only ion-icon,
.button-icon-only { .button-icon-only {
padding: 0 1px; padding: 0 1px;
} }

10
ionic/components/item/item.md.scss
View File

@ -89,8 +89,8 @@ ion-item-content {
margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
} }
icon[item-left], ion-icon[item-left],
icon[item-right] { ion-icon[item-right] {
margin-top: $item-md-padding-icon-top; margin-top: $item-md-padding-icon-top;
margin-bottom: $item-md-padding-icon-bottom; margin-bottom: $item-md-padding-icon-bottom;
margin-left: 0; margin-left: 0;
@ -102,7 +102,7 @@ icon[item-right] {
font-size: 1.2rem; font-size: 1.2rem;
} }
.button-icon-only icon, .button-icon-only ion-icon,
.button-icon-only { .button-icon-only {
padding: 0 1px; padding: 0 1px;
} }
@ -112,8 +112,8 @@ icon[item-right] {
line-height: $item-md-body-text-line-height; line-height: $item-md-body-text-line-height;
} }
icon[item-left] + .item-inner, ion-icon[item-left] + .item-inner,
icon[item-left] + .item-input { ion-icon[item-left] + .item-input {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2); margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
} }

16
ionic/components/item/test/buttons/main.html
View File

@ -26,12 +26,12 @@
<ion-item> <ion-item>
<button item-left (click)="testClick($event)"> <button item-left (click)="testClick($event)">
<icon home></icon> <ion-icon name="home"></ion-icon>
Left Icon Left Icon
</button> </button>
left icon buttons left icon buttons
<button outline item-right (click)="testClick($event)"> <button outline item-right (click)="testClick($event)">
<icon star></icon> <ion-icon name="star"></ion-icon>
Left Icon Left Icon
</button> </button>
</ion-item> </ion-item>
@ -39,36 +39,36 @@
<ion-item> <ion-item>
<button item-left (click)="testClick($event)"> <button item-left (click)="testClick($event)">
Right Icon Right Icon
<icon home></icon> <ion-icon name="home"></ion-icon>
</button> </button>
right icon buttons right icon buttons
<button outline item-right (click)="testClick($event)"> <button outline item-right (click)="testClick($event)">
Right Icon Right Icon
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
</ion-item> </ion-item>
<ion-item> <ion-item>
<button clear item-left (click)="testClick($event)"> <button clear item-left (click)="testClick($event)">
<icon navigate></icon> <ion-icon name="navigate"></ion-icon>
</button> </button>
icon only buttons icon only buttons
<button clear item-right (click)="testClick($event)"> <button clear item-right (click)="testClick($event)">
<icon navigate></icon> <ion-icon name="navigate"></ion-icon>
</button> </button>
</ion-item> </ion-item>
<ion-item> <ion-item>
ion-item right icon/text button ion-item right icon/text button
<button item-right (click)="testClick($event)"> <button item-right (click)="testClick($event)">
<icon refresh></icon> <ion-icon name="refresh"></ion-icon>
Refresh Refresh
</button> </button>
</ion-item> </ion-item>
<ion-item> <ion-item>
<button clear item-left (click)="testClick($event)"> <button clear item-left (click)="testClick($event)">
<icon settings></icon> <ion-icon name="settings"></ion-icon>
Settings Settings
</button> </button>
ion-item left clear button ion-item left clear button

26
ionic/components/item/test/icons/main.html
View File

@ -1,4 +1,6 @@
<ion-toolbar><ion-title>Item Icons</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Item Icons</ion-title>
</ion-toolbar>
<ion-content> <ion-content>
@ -16,44 +18,44 @@
<a ion-item href="#"> <a ion-item href="#">
a[ion-item] w/ right side default icon a[ion-item] w/ right side default icon
<icon information-circle item-right></icon> <ion-icon name="information-circle" item-right></ion-icon>
</a> </a>
<a ion-item href="#"> <a ion-item href="#">
a[ion-item] w/ right side large icon a[ion-item] w/ right side large icon
<icon large information-circle item-right></icon> <ion-icon name="information-circle" large item-right></ion-icon>
</a> </a>
<a ion-item href="#"> <a ion-item href="#">
a[ion-item] w/ right side small icon a[ion-item] w/ right side small icon
<icon small information-circle item-right></icon> <ion-icon name="information-circle" small item-right></ion-icon>
</a> </a>
<button ion-item> <button ion-item>
<icon star item-left></icon> <ion-icon name="star" item-left></ion-icon>
button[ion-item] w/ left side icon button[ion-item] w/ left side icon
</button> </button>
<button ion-item detail-none> <button ion-item detail-none>
<icon flag item-left></icon> <ion-icon name="flag" item-left></ion-icon>
button[ion-item][detail-none] button[ion-item][detail-none]
</button> </button>
<ion-item> <ion-item>
<icon flag item-left></icon> <ion-icon name="flag" item-left></ion-icon>
ion-item w/ both side icons ion-item w/ both side icons
<icon checkmark item-right></icon> <ion-icon name="checkmark" item-right></ion-icon>
</ion-item> </ion-item>
<a ion-item href="#"> <a ion-item href="#">
a[ion-item] w/ two right side icons a[ion-item] w/ two right side icons
<icon checkmark-circle item-right></icon> <ion-icon name="checkmark-circle" item-right></ion-icon>
<icon shuffle item-right></icon> <ion-icon name="shuffle" item-right></ion-icon>
</a> </a>
<button ion-item> <button ion-item>
<icon clipboard item-left></icon> <ion-icon name="clipboard" item-left></ion-icon>
<icon remove-circle item-left></icon> <ion-icon name="remove-circle" item-left></ion-icon>
button[ion-item] w/ two left side icons button[ion-item] w/ two left side icons
</button> </button>

4
ionic/components/item/test/images/main.html
View File

@ -7,12 +7,12 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon mail item-left></icon> <ion-icon name="mail" item-left></ion-icon>
One Line w/ Icon, div only text One Line w/ Icon, div only text
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon mail item-left></icon> <ion-icon name="mail" item-left></ion-icon>
<h2>Two Lines w/ Icon, H2 Header</h2> <h2>Two Lines w/ Icon, H2 Header</h2>
<p>Paragraph text.</p> <p>Paragraph text.</p>
</ion-item> </ion-item>

2
ionic/components/item/test/media/main.html
View File

@ -56,7 +56,7 @@
<p>Icon on right</p> <p>Icon on right</p>
<p>Vertically align top</p> <p>Vertically align top</p>
<p>button.item</p> <p>button.item</p>
<icon close-circle item-right></icon> <ion-icon name="close-circle" item-right></ion-icon>
</button> </button>
</ion-content> </ion-content>

4
ionic/components/item/test/sliding/main.html
View File

@ -31,7 +31,7 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<button primary (click)="archive(item)">Archive</button> <button primary (click)="archive(item)">Archive</button>
<button danger (click)="del(item)"><icon trash></icon></button> <button danger (click)="del(item)"><ion-icon name="trash"></ion-icon></button>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
@ -50,7 +50,7 @@
<ion-item-sliding #item> <ion-item-sliding #item>
<ion-item> <ion-item>
<icon mail item-left></icon> <ion-icon name="mail" item-left></ion-icon>
One Line w/ Icon, div only text One Line w/ Icon, div only text
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>

20
ionic/components/list/test/headers/main.html
View File

@ -9,12 +9,12 @@
</ion-list-header> </ion-list-header>
<ion-toggle> <ion-toggle>
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Wifi Wifi
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon heart item-left></icon> <ion-icon name="heart" item-left></ion-icon>
Affection Affection
<ion-note item-right> <ion-note item-right>
Very Little Very Little
@ -22,7 +22,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home item-left></icon> <ion-icon name="home" item-left></ion-icon>
Home Home
<ion-note item-right> <ion-note item-right>
Where the heart is Where the heart is
@ -39,12 +39,12 @@
</ion-list-header> </ion-list-header>
<ion-toggle checked="true"> <ion-toggle checked="true">
<icon color-wand item-left></icon> <ion-icon name="color-wand" item-left></ion-icon>
Magic Magic
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon star item-left></icon> <ion-icon name="star" item-left></ion-icon>
Star status Star status
<ion-note item-right> <ion-note item-right>
Super Super
@ -61,7 +61,7 @@
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<icon pizza item-left></icon> <ion-icon name="pizza" item-left></ion-icon>
Pizza Pizza
<ion-note item-right> <ion-note item-right>
Always Always
@ -69,7 +69,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon beer item-left></icon> <ion-icon name="beer" item-left></ion-icon>
Beer Beer
<ion-note item-right> <ion-note item-right>
Yes Plz Yes Plz
@ -77,7 +77,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon wine item-left></icon> <ion-icon name="wine" item-left></ion-icon>
Wine Wine
<ion-note item-right> <ion-note item-right>
All the time All the time
@ -90,12 +90,12 @@
<ion-list> <ion-list>
<ion-item> <ion-item>
<icon chatboxes item-left></icon> <ion-icon name="chatboxes" item-left></ion-icon>
New List, no header, Item 1 New List, no header, Item 1
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon chatboxes item-left></icon> <ion-icon name="chatboxes" item-left></ion-icon>
New List, no header, Item 2 New List, no header, Item 2
</ion-item> </ion-item>

8
ionic/components/list/test/inset/main.html
View File

@ -11,12 +11,12 @@
</ion-list-header> </ion-list-header>
<a ion-item href="#"> <a ion-item href="#">
<icon alarm item-left></icon> <ion-icon name="alarm" item-left></ion-icon>
List Link Item 1 List Link Item 1
</a> </a>
<a ion-item href="#"> <a ion-item href="#">
<icon analytics item-left></icon> <ion-icon name="analytics" item-left></ion-icon>
List Link Item 2 List Link Item 2
</a> </a>
@ -29,12 +29,12 @@
</ion-checkbox> </ion-checkbox>
<button ion-item> <button ion-item>
<icon boat item-left></icon> <ion-icon name="boat" item-left></ion-icon>
List Button Item 1 List Button Item 1
</button> </button>
<button ion-item> <button ion-item>
<icon book item-left></icon> <ion-icon name="book" item-left></ion-icon>
List Button Item 2 List Button Item 2
</button> </button>

24
ionic/components/list/test/no-lines/main.html
View File

@ -7,12 +7,12 @@
</ion-list-header> </ion-list-header>
<ion-toggle> <ion-toggle>
<icon wifi item-left></icon> <ion-icon name="wifi" item-left></ion-icon>
Wifi Wifi
</ion-toggle> </ion-toggle>
<ion-item> <ion-item>
<icon heart item-left></icon> <ion-icon name="heart" item-left></ion-icon>
Affection Affection
<ion-note item-right> <ion-note item-right>
Very Little Very Little
@ -20,7 +20,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon home item-left></icon> <ion-icon name="home" item-left></ion-icon>
Home Home
<ion-note item-right> <ion-note item-right>
Where the heart is Where the heart is
@ -34,7 +34,7 @@
</ion-list-header> </ion-list-header>
<ion-item no-lines> <ion-item no-lines>
<icon pizza item-left></icon> <ion-icon name="pizza" item-left></ion-icon>
Pizza Pizza
<ion-note item-right> <ion-note item-right>
Always Always
@ -42,7 +42,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon beer item-left></icon> <ion-icon name="beer" item-left></ion-icon>
Beer Beer
<ion-note item-right> <ion-note item-right>
Yes Plz Yes Plz
@ -50,7 +50,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon wine item-left></icon> <ion-icon name="wine" item-left></ion-icon>
Wine Wine
<ion-note item-right> <ion-note item-right>
All the time All the time
@ -64,7 +64,7 @@
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<icon pizza item-left></icon> <ion-icon name="pizza" item-left></ion-icon>
Pizza Pizza
<ion-note item-right> <ion-note item-right>
Always Always
@ -72,7 +72,7 @@
</ion-item> </ion-item>
<ion-item no-lines> <ion-item no-lines>
<icon beer item-left></icon> <ion-icon name="beer" item-left></ion-icon>
Beer Beer
<ion-note item-right> <ion-note item-right>
Yes Plz Yes Plz
@ -80,7 +80,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon wine item-left></icon> <ion-icon name="wine" item-left></ion-icon>
Wine Wine
<ion-note item-right> <ion-note item-right>
All the time All the time
@ -94,7 +94,7 @@
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<icon pizza item-left></icon> <ion-icon name="pizza" item-left></ion-icon>
Pizza Pizza
<ion-note item-right> <ion-note item-right>
Always Always
@ -102,7 +102,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<icon beer item-left></icon> <ion-icon name="beer" item-left></ion-icon>
Beer Beer
<ion-note item-right> <ion-note item-right>
Yes Plz Yes Plz
@ -110,7 +110,7 @@
</ion-item> </ion-item>
<ion-item no-lines> <ion-item no-lines>
<icon wine item-left></icon> <ion-icon name="wine" item-left></ion-icon>
Wine Wine
<ion-note item-right> <ion-note item-right>
All the time All the time

2
ionic/components/list/test/repeat-headers/main.html
View File

@ -9,7 +9,7 @@
<ion-item *ngFor="#component of person.components"> <ion-item *ngFor="#component of person.components">
{{component}} {{component}}
<div item-right> <div item-right>
<icon pin></icon> <ion-icon name="pin"></ion-icon>
</div> </div>
</ion-item> </ion-item>
</ion-list> </ion-list>

8
ionic/components/menu/test/basic/page1.html
View File

@ -2,7 +2,7 @@
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle="leftMenu"> <button menuToggle="leftMenu">
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>
@ -11,18 +11,18 @@
<ion-buttons end> <ion-buttons end>
<button> <button>
<icon football></icon> <ion-icon name="football"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons start> <ion-buttons start>
<button> <button>
<icon baseball></icon> <ion-icon name="baseball"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<button menuToggle="rightMenu" right secondary> <button menuToggle="rightMenu" right secondary>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
</ion-navbar> </ion-navbar>

2
ionic/components/menu/test/basic/page2.html
View File

@ -2,7 +2,7 @@
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle="leftMenu"> <button menuToggle="leftMenu">
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>

2
ionic/components/menu/test/basic/page3.html
View File

@ -6,7 +6,7 @@
</ion-title> </ion-title>
<button menuToggle="rightMenu" right> <button menuToggle="rightMenu" right>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
</ion-navbar> </ion-navbar>

2
ionic/components/menu/test/multiple/page1.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar> <ion-navbar *navbar>
<button [menuToggle]="activeMenu"> <button [menuToggle]="activeMenu">
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>
Multiple Menus Multiple Menus

2
ionic/components/menu/test/overlay/page1.html
View File

@ -2,7 +2,7 @@
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle="leftMenu"> <button menuToggle="leftMenu">
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>

2
ionic/components/menu/test/push/page1.html
View File

@ -2,7 +2,7 @@
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle="leftMenu"> <button menuToggle="leftMenu">
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>

2
ionic/components/menu/test/reveal/page1.html
View File

@ -2,7 +2,7 @@
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle="leftMenu"> <button menuToggle="leftMenu">
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>

4
ionic/components/nav/test/basic/index.ts
View File

@ -6,7 +6,7 @@ import {NavParams, NavController, ViewController, IONIC_DIRECTIVES} from 'ionic/
@Component({ @Component({
selector: 'my-cmp', selector: 'my-cmp',
template: `<p>My Custom Component Test <icon star></icon></p>`, template: `<p>My Custom Component Test <ion-icon name="star"></ion-icon></p>`,
directives: [IONIC_DIRECTIVES] directives: [IONIC_DIRECTIVES]
}) })
class MyCmpTest{} class MyCmpTest{}
@ -17,7 +17,7 @@ class MyCmpTest{}
<ion-navbar *navbar> <ion-navbar *navbar>
<ion-title>{{title}}</ion-title> <ion-title>{{title}}</ion-title>
<ion-buttons start> <ion-buttons start>
<button><icon star></icon></button> <button><ion-icon name="star"></ion-icon></button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button>S1</button> <button>S1</button>

4
ionic/components/nav/test/nested/index.ts
View File

@ -76,7 +76,7 @@ export class Account {
template: ` template: `
<ion-navbar *navbar primary> <ion-navbar *navbar primary>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>Account Dashboard</ion-title> <ion-title>Account Dashboard</ion-title>
</ion-navbar> </ion-navbar>
@ -107,7 +107,7 @@ export class Dashboard {
template: ` template: `
<ion-navbar *navbar danger> <ion-navbar *navbar danger>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>Account Profile</ion-title> <ion-title>Account Profile</ion-title>
</ion-navbar> </ion-navbar>

2
ionic/components/nav/test/routing/view1.html
View File

@ -1,7 +1,7 @@
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>First View</ion-title> <ion-title>First View</ion-title>
</ion-navbar> </ion-navbar>

2
ionic/components/nav/test/routing/view2.html
View File

@ -3,7 +3,7 @@
<ion-title>Second View</ion-title> <ion-title>Second View</ion-title>
<ion-buttons end> <ion-buttons end>
<button> <button>
<icon help></icon> <ion-icon name="help"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>

2
ionic/components/navbar/navbar.ts
View File

@ -94,7 +94,7 @@ class ToolbarBackground {
template: template:
'<div class="toolbar-background"></div>' + '<div class="toolbar-background"></div>' +
'<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' + '<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
'<icon class="back-button-icon" [name]="bbIcon"></icon>' + '<ion-icon class="back-button-icon" [name]="bbIcon"></ion-icon>' +
'<span class="back-button-text">' + '<span class="back-button-text">' +
'<span class="back-default">{{bbText}}</span>' + '<span class="back-default">{{bbText}}</span>' +
'</span>' + '</span>' +

2
ionic/components/radio/test/basic/main.html
View File

@ -32,7 +32,7 @@
</form> </form>
<div aria-hidden="true" class="align-center"> <div aria-hidden="true" text-center>
<button (click)="setApple()" outline small>Select Apple</button> <button (click)="setApple()" outline small>Select Apple</button>
<button (click)="setBanana()" outline small>Select Banana</button> <button (click)="setBanana()" outline small>Select Banana</button>
<button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button> <button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>

2
ionic/components/searchbar/searchbar.ts
View File

@ -62,7 +62,7 @@ export class SearchbarInput {
template: template:
'<div class="searchbar-input-container">' + '<div class="searchbar-input-container">' +
'<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" clear dark class="searchbar-md-cancel">' + '<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" clear dark class="searchbar-md-cancel">' +
'<icon arrow-back></icon>' + '<ion-icon name="arrow-back"></ion-icon>' +
'</button>' + '</button>' +
'<div class="searchbar-search-icon"></div>' + '<div class="searchbar-search-icon"></div>' +
'<input [value]="value" (keyup)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' + '<input [value]="value" (keyup)="inputChanged($event)" (blur)="inputBlurred()" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +

2
ionic/components/segment/test/basic/main.html
View File

@ -12,7 +12,7 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons end> <ion-buttons end>
<button> <button>
<icon search></icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-segment secondary> <ion-segment secondary>

2
ionic/components/segment/test/nav/index.ts
View File

@ -20,7 +20,7 @@ class SegmentPage {
template: ` template: `
<ion-navbar *navbar hideBackButton> <ion-navbar *navbar hideBackButton>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title> <ion-title>
Second Page Second Page

2
ionic/components/tabs/tabs.ios.scss
View File

@ -70,7 +70,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
margin-bottom: 0; margin-bottom: 0;
} }
icon { ion-icon {
min-width: 24px; min-width: 24px;
height: 26px; height: 26px;
font-size: 24px; font-size: 24px;

2
ionic/components/tabs/tabs.md.scss
View File

@ -58,7 +58,7 @@ tabbar {
[tabbarIcons=left] .tab-button { [tabbarIcons=left] .tab-button {
padding-bottom: 10px; padding-bottom: 10px;
icon { ion-icon {
min-width: 24px; min-width: 24px;
} }
} }

2
ionic/components/tabs/tabs.ts
View File

@ -49,7 +49,7 @@ import {rafFrames} from '../../util/dom';
'<ion-tabbar-section>' + '<ion-tabbar-section>' +
'<tabbar role="tablist">' + '<tabbar role="tablist">' +
'<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' + '<a *ngFor="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
'<icon [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></icon>' + '<ion-icon [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
'<span class="tab-button-text">{{t.tabTitle}}</span>' + '<span class="tab-button-text">{{t.tabTitle}}</span>' +
'</a>' + '</a>' +
'<tab-highlight></tab-highlight>' + '<tab-highlight></tab-highlight>' +

2
ionic/components/tabs/test/basic/index.ts
View File

@ -72,7 +72,7 @@ class Tab2 {
template: ` template: `
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>Stopwatch</ion-title> <ion-title>Stopwatch</ion-title>
</ion-navbar> </ion-navbar>

4
ionic/components/tabs/test/ghost/index.ts
View File

@ -47,7 +47,7 @@ class Tab2 {
template: ` template: `
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>Stopwatch</ion-title> <ion-title>Stopwatch</ion-title>
</ion-navbar> </ion-navbar>
@ -69,7 +69,7 @@ class Tab3 {
template: ` template: `
<ion-navbar *navbar> <ion-navbar *navbar>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>Quesarito</ion-title> <ion-title>Quesarito</ion-title>
</ion-navbar> </ion-navbar>

12
ionic/components/text-input/test/fixed-inline-labels/main.html
View File

@ -20,7 +20,7 @@
<ion-label>From</ion-label> <ion-label>From</ion-label>
<input value="Text 3" type="text"> <input value="Text 3" type="text">
<button clear item-right> <button clear item-right>
<icon power></icon> <ion-icon name="power"></ion-icon>
</button> </button>
</ion-input> </ion-input>
@ -30,25 +30,25 @@
</ion-input> </ion-input>
<ion-input fixed-label> <ion-input fixed-label>
<icon globe item-left></icon> <ion-icon name="globe" item-left></ion-icon>
<ion-label>Website</ion-label> <ion-label>Website</ion-label>
<input value="http://ionic.io/" type="url"> <input value="http://ionic.io/" type="url">
</ion-input> </ion-input>
<ion-input fixed-label> <ion-input fixed-label>
<icon mail item-left></icon> <ion-icon name="mail" item-left></ion-icon>
<ion-label>Email</ion-label> <ion-label>Email</ion-label>
<input value="email6@email.com" type="email"> <input value="email6@email.com" type="email">
</ion-input> </ion-input>
<ion-input fixed-label> <ion-input fixed-label>
<icon call item-left></icon> <ion-icon name="call" item-left></ion-icon>
<ion-label>Phone</ion-label> <ion-label>Phone</ion-label>
<input value="867-5309" type="tel"> <input value="867-5309" type="tel">
</ion-input> </ion-input>
<ion-input fixed-label> <ion-input fixed-label>
<icon contact item-left></icon> <ion-icon name="contact" item-left></ion-icon>
<input placeholder="Placeholder Text" type="text"> <input placeholder="Placeholder Text" type="text">
</ion-input> </ion-input>
@ -69,7 +69,7 @@
</ion-input> </ion-input>
<ion-input fixed-label> <ion-input fixed-label>
<icon create item-left></icon> <ion-icon name="create" item-left></ion-icon>
<ion-label>Message</ion-label> <ion-label>Message</ion-label>
<textarea>To infinity and beyond</textarea> <textarea>To infinity and beyond</textarea>
</ion-input> </ion-input>

10
ionic/components/text-input/test/inline-labels/main.html
View File

@ -22,7 +22,7 @@
<ion-label>From:</ion-label> <ion-label>From:</ion-label>
<input value="Text 3" type="text"> <input value="Text 3" type="text">
<button clear item-right> <button clear item-right>
<icon power></icon> <ion-icon name="power"></ion-icon>
</button> </button>
</ion-input> </ion-input>
@ -32,19 +32,19 @@
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon globe item-left></icon> <ion-icon name="globe" item-left></ion-icon>
<ion-label>Website:</ion-label> <ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url"> <input value="http://ionic.io/" type="url">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon mail item-left></icon> <ion-icon name="mail" item-left></ion-icon>
<ion-label>Email:</ion-label> <ion-label>Email:</ion-label>
<input value="email6@email.com" type="email"> <input value="email6@email.com" type="email">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon create item-left></icon> <ion-icon name="create" item-left></ion-icon>
<ion-label>Feedback:</ion-label> <ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea> <textarea placeholder="Placeholder Text"></textarea>
</ion-input> </ion-input>
@ -52,7 +52,7 @@
<ion-input> <ion-input>
<ion-label>More Info:</ion-label> <ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text"> <input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon> <ion-icon name="flag" item-right></ion-icon>
</ion-input> </ion-input>
<ion-input> <ion-input>

10
ionic/components/text-input/test/input-focus/main.html
View File

@ -38,7 +38,7 @@
<ion-label>Text 3:</ion-label> <ion-label>Text 3:</ion-label>
<input type="text"> <input type="text">
<button clear item-right> <button clear item-right>
<icon power></icon> <ion-icon name="power"></ion-icon>
</button> </button>
</ion-input> </ion-input>
@ -48,19 +48,19 @@
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon globe item-left></icon> <ion-icon name="globe" item-left></ion-icon>
<ion-label>Website:</ion-label> <ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url"> <input value="http://ionic.io/" type="url">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon mail item-left></icon> <ion-icon name="mail" item-left></ion-icon>
<ion-label>Email:</ion-label> <ion-label>Email:</ion-label>
<input value="email6@email.com" type="email"> <input value="email6@email.com" type="email">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon create item-left></icon> <ion-icon name="create" item-left></ion-icon>
<ion-label>Feedback:</ion-label> <ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea> <textarea placeholder="Placeholder Text"></textarea>
</ion-input> </ion-input>
@ -72,7 +72,7 @@
<ion-input> <ion-input>
<ion-label>More Info:</ion-label> <ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text"> <input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon> <ion-icon name="flag" item-right></ion-icon>
</ion-input> </ion-input>
<ion-checkbox> <ion-checkbox>

20
ionic/components/text-input/test/inset-inputs/main.html
View File

@ -1,5 +1,7 @@
<ion-toolbar><ion-title>Inset Inputs</ion-title></ion-toolbar> <ion-toolbar>
<ion-title>Inset Inputs</ion-title>
</ion-toolbar>
<ion-content class="outer-content"> <ion-content class="outer-content">
@ -8,17 +10,17 @@
<ion-list inset> <ion-list inset>
<ion-input> <ion-input>
<icon search item-left></icon> <ion-icon name="search" item-left></ion-icon>
<input value="Input inside an inset list" type="text"> <input value="Input inside an inset list" type="text">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon call item-left></icon> <ion-icon name="call" item-left></ion-icon>
<input type="tel"> <input type="tel">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon mail item-left></icon> <ion-icon name="mail" item-left></ion-icon>
<input placeholder="Placeholder text" type="text"> <input placeholder="Placeholder text" type="text">
</ion-input> </ion-input>
@ -28,13 +30,13 @@
<ion-list inset> <ion-list inset>
<ion-input inset> <ion-input inset>
<icon search item-left></icon> <ion-icon name="search" item-left></ion-icon>
<input value="Inset input inside an inset list" type="text"> <input value="Inset input inside an inset list" type="text">
</ion-input> </ion-input>
<ion-input inset> <ion-input inset>
<input value="Inset input inside an inset list" type="text"> <input value="Inset input inside an inset list" type="text">
<icon mic item-right></icon> <ion-icon name="mic" item-right></ion-icon>
</ion-input> </ion-input>
</ion-list> </ion-list>
@ -43,7 +45,7 @@
<ion-list> <ion-list>
<ion-input inset> <ion-input inset>
<icon search item-left></icon> <ion-icon name="search" item-left></ion-icon>
<input value="Inset input inside a list" type="text"> <input value="Inset input inside a list" type="text">
<button outline item-right>Search</button> <button outline item-right>Search</button>
</ion-input> </ion-input>
@ -54,13 +56,13 @@
<ion-card> <ion-card>
<ion-input> <ion-input>
<icon search item-left></icon> <ion-icon name="search" item-left></ion-icon>
<input value="Input inside a card" type="text"> <input value="Input inside a card" type="text">
</ion-input> </ion-input>
<ion-input> <ion-input>
<input value="Input inside a card" type="text"> <input value="Input inside a card" type="text">
<icon mic item-right></icon> <ion-icon name="mic" item-right></ion-icon>
</ion-input> </ion-input>
</ion-card> </ion-card>

8
ionic/components/text-input/test/placeholder-labels/main.html
View File

@ -15,12 +15,12 @@
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon call item-left></icon> <ion-icon name="call" item-left></ion-icon>
<input placeholder="Text Input Placeholder" type="text"> <input placeholder="Text Input Placeholder" type="text">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon call item-left></icon> <ion-icon name="call" item-left></ion-icon>
<input placeholder="Text Input Placeholder" value="Text Input Value" type="text"> <input placeholder="Text Input Placeholder" value="Text Input Value" type="text">
</ion-input> </ion-input>
@ -45,12 +45,12 @@
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon call item-left></icon> <ion-icon name="call" item-left></ion-icon>
<input placeholder="Inset List: Text Input Placeholder" type="text"> <input placeholder="Inset List: Text Input Placeholder" type="text">
</ion-input> </ion-input>
<ion-input> <ion-input>
<icon call item-left></icon> <ion-icon name="call" item-left></ion-icon>
<input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value" type="text"> <input placeholder="Inset List: Text Input Placeholder" value="Inset List: Text Input Value" type="text">
</ion-input> </ion-input>

25
ionic/components/text-input/text-input.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, Output, EventEmitter, ContentChild, HostListener} from 'angular2/core'; import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input, Output, EventEmitter, ContentChild, ContentChildren, HostListener} from 'angular2/core';
import {NgIf} from 'angular2/common'; import {NgIf} from 'angular2/common';
import {NavController} from '../nav/nav-controller'; import {NavController} from '../nav/nav-controller';
@ -10,6 +10,7 @@ import {Content} from '../content/content';
import {CSS, hasFocus, pointerCoord, hasPointerMoved} from '../../util/dom'; import {CSS, hasFocus, pointerCoord, hasPointerMoved} from '../../util/dom';
import {Platform} from '../../platform/platform'; import {Platform} from '../../platform/platform';
import {Button} from '../button/button'; import {Button} from '../button/button';
import {Icon} from '../icon/icon';
/** /**
@ -263,6 +264,28 @@ export class TextInput {
this.label = label; this.label = label;
} }
/**
* @private
*/
@ContentChildren(Button)
set _buttons(buttons) {
buttons.toArray().forEach(button => {
if (!button.isItem) {
button.addClass('item-button');
}
});
}
/**
* @private
*/
@ContentChildren(Icon)
set _icons(icons) {
icons.toArray().forEach(icon => {
icon.addClass('item-icon');
});
}
/** /**
* @private * @private
* On Initialization check for attributes * On Initialization check for attributes

2
ionic/components/toggle/test/basic/main.html
View File

@ -36,7 +36,7 @@
</form> </form>
<p aria-hidden="true" class="align-center"> <p aria-hidden="true" text-center>
<button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button> <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
<button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button> <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
<button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button> <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>

48
ionic/components/toolbar/test/colors/main.html
View File

@ -7,15 +7,15 @@
<ion-toolbar primary> <ion-toolbar primary>
<ion-buttons start> <ion-buttons start>
<button> <button>
<icon ios=contact></icon> <ion-icon ios="contact"></ion-icon>
</button> </button>
<button> <button>
<icon search></icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary> <button secondary>
<icon more></icon> <ion-icon name="more"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Primary</ion-title> <ion-title>Primary</ion-title>
@ -25,15 +25,15 @@
<ion-toolbar primary> <ion-toolbar primary>
<ion-buttons start> <ion-buttons start>
<button class="activated"> <button class="activated">
<icon ios="contact"></icon> <ion-icon ios="contact"></ion-icon>
</button> </button>
<button class="activated"> <button class="activated">
<icon search></icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary class="activated"> <button secondary class="activated">
<icon more></icon> <ion-icon name="more"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Primary.activated</ion-title> <ion-title>Primary.activated</ion-title>
@ -43,10 +43,10 @@
<ion-toolbar secondary> <ion-toolbar secondary>
<ion-buttons start> <ion-buttons start>
<button solid> <button solid>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button solid> <button solid>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
Solid Solid
</button> </button>
</ion-buttons> </ion-buttons>
@ -54,7 +54,7 @@
<ion-buttons end> <ion-buttons end>
<button solid danger> <button solid danger>
Help Help
<icon help-circle></icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -63,10 +63,10 @@
<ion-toolbar secondary> <ion-toolbar secondary>
<ion-buttons start> <ion-buttons start>
<button solid class="activated"> <button solid class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button solid class="activated"> <button solid class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
Solid Solid
</button> </button>
</ion-buttons> </ion-buttons>
@ -74,7 +74,7 @@
<ion-buttons end> <ion-buttons end>
<button solid danger class="activated"> <button solid danger class="activated">
Help Help
<icon help-circle></icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -83,16 +83,16 @@
<ion-toolbar dark> <ion-toolbar dark>
<ion-buttons start> <ion-buttons start>
<button outline> <button outline>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button outline> <button outline>
<icon star></icon> <ion-icon name="star"></ion-icon>
Star Star
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary outline> <button secondary outline>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Dark</ion-title> <ion-title>Dark</ion-title>
@ -102,16 +102,16 @@
<ion-toolbar dark> <ion-toolbar dark>
<ion-buttons start> <ion-buttons start>
<button outline class="activated"> <button outline class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button outline class="activated"> <button outline class="activated">
<icon star></icon> <ion-icon name="star"></ion-icon>
Star Star
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary outline class="activated"> <button secondary outline class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Dark.activated</ion-title> <ion-title>Dark.activated</ion-title>
@ -121,14 +121,14 @@
<ion-toolbar danger> <ion-toolbar danger>
<ion-buttons start> <ion-buttons start>
<button> <button>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
Clear Clear
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button> <button>
Edit Edit
<icon create></icon> <ion-icon name="create"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Danger</ion-title> <ion-title>Danger</ion-title>
@ -137,11 +137,11 @@
<ion-toolbar danger> <ion-toolbar danger>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-buttons start> <ion-buttons start>
<button> <button>
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Danger</ion-title> <ion-title>Danger</ion-title>
@ -151,12 +151,12 @@
<ion-toolbar transparent> <ion-toolbar transparent>
<ion-buttons end> <ion-buttons end>
<button #button1 (click)="buttonClick(button1)"> <button #button1 (click)="buttonClick(button1)">
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Transparent</ion-title> <ion-title>Transparent</ion-title>
<button menuToggle right> <button menuToggle right>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
</ion-toolbar> </ion-toolbar>

50
ionic/components/toolbar/test/scenarios/main.html
View File

@ -7,15 +7,15 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button> <button>
<icon ios=contact></icon> <ion-icon ios="contact"></ion-icon>
</button> </button>
<button> <button>
<icon search></icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary> <button secondary>
<icon more></icon> <ion-icon name="more"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults</ion-title> <ion-title>Defaults</ion-title>
@ -25,15 +25,15 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button class="activated"> <button class="activated">
<icon ios="contact"></icon> <ion-icon ios="contact"></ion-icon>
</button> </button>
<button class="activated"> <button class="activated">
<icon search></icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary class="activated"> <button secondary class="activated">
<icon more></icon> <ion-icon name="more"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults.activated</ion-title> <ion-title>Defaults.activated</ion-title>
@ -43,10 +43,10 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button solid> <button solid>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button solid> <button solid>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
Solid Solid
</button> </button>
</ion-buttons> </ion-buttons>
@ -54,7 +54,7 @@
<ion-buttons end> <ion-buttons end>
<button solid secondary> <button solid secondary>
Help Help
<icon help-circle></icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -63,10 +63,10 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button solid class="activated"> <button solid class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button solid class="activated"> <button solid class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
Solid Solid
</button> </button>
</ion-buttons> </ion-buttons>
@ -74,7 +74,7 @@
<ion-buttons end> <ion-buttons end>
<button solid secondary class="activated"> <button solid secondary class="activated">
Help Help
<icon help-circle></icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
@ -83,16 +83,16 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button outline> <button outline>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button outline> <button outline>
<icon star></icon> <ion-icon name="star"></ion-icon>
Star Star
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary outline> <button secondary outline>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Outline</ion-title> <ion-title>Outline</ion-title>
@ -102,16 +102,16 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button outline class="activated"> <button outline class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
<button outline class="activated"> <button outline class="activated">
<icon star></icon> <ion-icon name="star"></ion-icon>
Star Star
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button secondary outline class="activated"> <button secondary outline class="activated">
<icon contact></icon> <ion-icon name="contact"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Outline.activated</ion-title> <ion-title>Outline.activated</ion-title>
@ -121,14 +121,14 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button> <button>
<icon contact></icon> <ion-icon name="contact"></ion-icon>
Clear Clear
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button> <button>
Edit Edit
<icon create></icon> <ion-icon name="create"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Icon/Color Attr</ion-title> <ion-title>Icon/Color Attr</ion-title>
@ -137,11 +137,11 @@
<ion-toolbar> <ion-toolbar>
<button menuToggle> <button menuToggle>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-buttons start> <ion-buttons start>
<button> <button>
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Left side menu toggle</ion-title> <ion-title>Left side menu toggle</ion-title>
@ -151,19 +151,19 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons end> <ion-buttons end>
<button #button1 (click)="buttonClick(button1)"> <button #button1 (click)="buttonClick(button1)">
<icon star></icon> <ion-icon name="star"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Right side menu toggle</ion-title> <ion-title>Right side menu toggle</ion-title>
<button menuToggle right> <button menuToggle right>
<icon menu></icon> <ion-icon name="menu"></ion-icon>
</button> </button>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-buttons end> <ion-buttons end>
<button #button2 (click)="buttonClick(button2)"> <button #button2 (click)="buttonClick(button2)">
<icon search></icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
<ion-segment secondary> <ion-segment secondary>

8
ionic/components/toolbar/toolbar.ios.scss
View File

@ -223,7 +223,7 @@ ion-buttons[right] {
// iOS Toolbar Button Icon // iOS Toolbar Button Icon
// -------------------------------------------------- // --------------------------------------------------
.bar-button-icon-left icon { .bar-button-icon-left ion-icon {
margin-left: -0.1em; margin-left: -0.1em;
padding-right: 0.3em; padding-right: 0.3em;
font-size: 1.4em; font-size: 1.4em;
@ -231,7 +231,7 @@ ion-buttons[right] {
pointer-events: none; pointer-events: none;
} }
.bar-button-icon-right icon { .bar-button-icon-right ion-icon {
padding-left: 0.4em; padding-left: 0.4em;
font-size: 1.4em; font-size: 1.4em;
line-height: 0.67; line-height: 0.67;
@ -242,7 +242,7 @@ ion-buttons[right] {
padding: 0; padding: 0;
min-width: 0.9em; min-width: 0.9em;
icon { ion-icon {
padding: 0 0.1em; padding: 0 0.1em;
font-size: 1.8em; font-size: 1.8em;
line-height: 0.67; line-height: 0.67;
@ -280,7 +280,7 @@ ion-buttons[right] {
min-width: 36px; min-width: 36px;
order: map-get($toolbar-order-ios, menu-toggle-start); order: map-get($toolbar-order-ios, menu-toggle-start);
icon { ion-icon {
padding: 0 6px; padding: 0 6px;
font-size: 2.8rem; font-size: 2.8rem;
} }

8
ionic/components/toolbar/toolbar.md.scss
View File

@ -223,7 +223,7 @@ ion-buttons[right] {
// Material Design Toolbar Button Icon // Material Design Toolbar Button Icon
// -------------------------------------------------- // --------------------------------------------------
.bar-button-icon-left icon { .bar-button-icon-left ion-icon {
margin-left: -0.1em; margin-left: -0.1em;
padding-right: 0.3em; padding-right: 0.3em;
font-size: 1.4em; font-size: 1.4em;
@ -231,7 +231,7 @@ ion-buttons[right] {
pointer-events: none; pointer-events: none;
} }
.bar-button-icon-right icon { .bar-button-icon-right ion-icon {
padding-left: 0.4em; padding-left: 0.4em;
font-size: 1.4em; font-size: 1.4em;
line-height: 0.67; line-height: 0.67;
@ -241,7 +241,7 @@ ion-buttons[right] {
.bar-button-icon-only { .bar-button-icon-only {
padding: 0; padding: 0;
icon { ion-icon {
padding: 0 0.1em; padding: 0 0.1em;
font-size: 1.8em; font-size: 1.8em;
line-height: 0.67; line-height: 0.67;
@ -277,7 +277,7 @@ ion-buttons[right] {
min-width: 44px; min-width: 44px;
order: map-get($toolbar-order-md, menu-toggle-start); order: map-get($toolbar-order-md, menu-toggle-start);
icon { ion-icon {
padding: 0 6px; padding: 0 6px;
font-size: 2.4rem; font-size: 2.4rem;
} }

2
ionic/fonts/ionicons.scss
View File

@ -15,7 +15,7 @@ $ionicons-version: "3.0.0" !default;
font-style: normal; font-style: normal;
} }
icon, ion-icon,
[icon], [icon],
.icon { .icon {
display: inline-block; display: inline-block;