javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +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-destructive-button-text-color: #f53d3d !default;
$action-sheet-ios-cancel-button-background-color: #fff !default;
ion-action-sheet {
@ -78,6 +79,7 @@ ion-action-sheet {
.action-sheet-cancel {
font-weight: bold;
background: $action-sheet-ios-cancel-button-background-color;
}
&.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-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">' +
'<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}}' +
'</button>' +
'</div>' +
'<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">' +
'<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}}' +
'</button>' +
'</div>' +

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

@ -24,7 +24,7 @@ $button-fab-size: 56px !default;
font-size: 14px;
icon {
ion-icon {
flex: 1;
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;
font-size: 1.4em;
line-height: 0.67;
pointer-events: none;
}
.button-icon-right icon {
.button-icon-right ion-icon {
padding-left: 0.4em;
font-size: 1.4em;
line-height: 0.67;
@ -22,7 +22,7 @@
padding: 0;
min-width: 0.9em;
icon {
ion-icon {
padding: 0 0.5em;
font-size: 1.8em;
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;
}
.button-small.button-icon-only icon {
.button-small.button-icon-only ion-icon {
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;
}
.button-small.button-icon-only icon {
.button-small.button-icon-only ion-icon {
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) {
if (childNode.nodeName === 'ICON') {
if (childNode.nodeName === 'ION-ICON') {
// icon element node
nodes.push(ICON);
} else {
// element other than an <icon>
// element other than an <ion-icon>
nodes.push(TEXT);
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -36,7 +36,7 @@
</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)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</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;
font-size: 1.2em;
}
icon[small] {
ion-icon[small] {
font-size: 1.1em;
}

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

@ -6,18 +6,20 @@ import {Config} from '../../config/config';
/**
* @name Icon
* @description
* Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
* check out the [Ionicons resource docs](../../../../resources/ionicons).
* Icons can be used on their own, or inside of a number of Ionic components.
* For a full list of available icons, check out the
* [Ionicons resource docs](../../../../resources/ionicons).
*
* @usage
* ```html
* <!-- use the appropriate home icon for ios and md -->
* <icon home></icon>
* <!-- use the appropriate star icon for ios and md -->
* <ion-icon name="star"></ion-icon>
*
* <!-- 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.
* 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.
@ -26,7 +28,7 @@ import {Config} from '../../config/config';
*
*/
@Directive({
selector: 'icon',
selector: 'ion-icon,icon',
inputs: [
'name',
'ios',
@ -40,42 +42,29 @@ import {Config} from '../../config/config';
export class Icon {
constructor(
private _elementRef: ElementRef,
config: Config,
private _elementRef: ElementRef,
private _renderer: Renderer
) {
this.config = config;
this.mode = config.get('iconMode');
}
/**
* @private
*/
addClass(className) {
this._renderer.setElementClass(this._elementRef, className, true);
if (_elementRef.nativeElement.tagName === 'ICON') {
// deprecated warning
console.warn('<icon> has been renamed to <ion-icon>');
console.warn('<ion-icon> requires the "name" attribute w/ a value');
console.warn('<ion-icon name="home"></ion-icon> should now be <ion-icon name="home"></ion-icon>');
}
}
/**
* @private
*/
ngOnInit() {
let ele = this._elementRef.nativeElement;
if (this.mode == 'ios' && this.ios) {
this.name = this.ios;
} else if (this.mode == 'md' && 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;
@ -89,6 +78,13 @@ export class Icon {
this.update();
}
/**
* @private
*/
addClass(className) {
this._renderer.setElementClass(this._elementRef, className, true);
}
get isActive() {
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-item>
<icon home item-left></icon>
<ion-icon name="home" item-left></ion-icon>
<code>
&lt;icon home>&lt;/icon>
&lt;ion-icon name="home">&lt;/ion-icon>
</code>
</ion-item>
<ion-item>
<icon home isActive="true" item-left></icon>
<ion-icon [name]="homeIcon" item-left></ion-icon>
<code>
&lt;icon home isActive="true">&lt;/icon>
&lt;ion-icon [name]="homeIcon">&lt;/ion-icon>
</code>
</ion-item>
<ion-item>
<icon home isActive="false" item-left></icon>
<ion-icon name="ion-social-twitter" item-left></ion-icon>
<code>
&lt;icon home isActive="false">&lt;/icon>
&lt;ion-icon name="ion-social-twitter">&lt;/ion-icon>
</code>
</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>
&lt;icon name="home">&lt;/icon>
&lt;ion-icon ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
</code>
</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>
&lt;icon [name]="homeIcon">&lt;/icon>
&lt;ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
</code>
</ion-item>
<ion-item>
<icon ion-social-twitter item-left></icon>
<ion-icon ios="ion-social-apple" item-left></ion-icon>
<code>
&lt;icon ion-social-twitter>&lt;/icon>
&lt;ion-icon ios="ion-social-apple">&lt;/ion-icon>
</code>
</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>
&lt;icon ios="ion-social-apple" md="ion-social-android">&lt;/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>
&lt;ion-icon md="ion-social-android">&lt;/ion-icon>
</code>
</ion-item>

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

@ -4,19 +4,19 @@
// --------------------------------------------------
// Icons, avatars, thumbnails, notes, etc.
.item > icon[small]:first-child,
.item-inner > icon[small]:first-child {
.item > ion-icon[small]:first-child,
.item-inner > ion-icon[small]:first-child {
min-width: 18px;
}
.item > icon:first-child,
.item-inner > icon:first-child {
.item > ion-icon:first-child,
.item-inner > ion-icon:first-child {
min-width: 24px;
text-align: center;
}
.item > icon,
.item-inner > icon {
.item > ion-icon,
.item-inner > ion-icon {
line-height: 1;
font-size: 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;
}
.button-icon-only icon,
.button-icon-only ion-icon,
.button-icon-only {
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;
}
icon[item-left],
icon[item-right] {
ion-icon[item-left],
ion-icon[item-right] {
margin-top: $item-md-padding-icon-top;
margin-bottom: $item-md-padding-icon-bottom;
margin-left: 0;
@ -102,7 +102,7 @@ icon[item-right] {
font-size: 1.2rem;
}
.button-icon-only icon,
.button-icon-only ion-icon,
.button-icon-only {
padding: 0 1px;
}
@ -112,8 +112,8 @@ icon[item-right] {
line-height: $item-md-body-text-line-height;
}
icon[item-left] + .item-inner,
icon[item-left] + .item-input {
ion-icon[item-left] + .item-inner,
ion-icon[item-left] + .item-input {
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>
<button item-left (click)="testClick($event)">
<icon home></icon>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
left icon buttons
<button outline item-right (click)="testClick($event)">
<icon star></icon>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</ion-item>
@ -39,36 +39,36 @@
<ion-item>
<button item-left (click)="testClick($event)">
Right Icon
<icon home></icon>
<ion-icon name="home"></ion-icon>
</button>
right icon buttons
<button outline item-right (click)="testClick($event)">
Right Icon
<icon star></icon>
<ion-icon name="star"></ion-icon>
</button>
</ion-item>
<ion-item>
<button clear item-left (click)="testClick($event)">
<icon navigate></icon>
<ion-icon name="navigate"></ion-icon>
</button>
icon only buttons
<button clear item-right (click)="testClick($event)">
<icon navigate></icon>
<ion-icon name="navigate"></ion-icon>
</button>
</ion-item>
<ion-item>
ion-item right icon/text button
<button item-right (click)="testClick($event)">
<icon refresh></icon>
<ion-icon name="refresh"></ion-icon>
Refresh
</button>
</ion-item>
<ion-item>
<button clear item-left (click)="testClick($event)">
<icon settings></icon>
<ion-icon name="settings"></ion-icon>
Settings
</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>
@ -16,44 +18,44 @@
<a ion-item href="#">
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 ion-item href="#">
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 ion-item href="#">
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>
<button ion-item>
<icon star item-left></icon>
<ion-icon name="star" item-left></ion-icon>
button[ion-item] w/ left side icon
</button>
<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>
<icon flag item-left></icon>
<ion-icon name="flag" item-left></ion-icon>
ion-item w/ both side icons
<icon checkmark item-right></icon>
<ion-icon name="checkmark" item-right></ion-icon>
</ion-item>
<a ion-item href="#">
a[ion-item] w/ two right side icons
<icon checkmark-circle item-right></icon>
<icon shuffle item-right></icon>
<ion-icon name="checkmark-circle" item-right></ion-icon>
<ion-icon name="shuffle" item-right></ion-icon>
</a>
<button ion-item>
<icon clipboard item-left></icon>
<icon remove-circle item-left></icon>
<ion-icon name="clipboard" item-left></ion-icon>
<ion-icon name="remove-circle" item-left></ion-icon>
button[ion-item] w/ two left side icons
</button>

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

@ -7,12 +7,12 @@
</ion-item>
<ion-item>
<icon mail item-left></icon>
<ion-icon name="mail" item-left></ion-icon>
One Line w/ Icon, div only text
</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>
<p>Paragraph text.</p>
</ion-item>

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

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

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

@ -31,7 +31,7 @@
</ion-item>
<ion-item-options>
<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-sliding>
@ -50,7 +50,7 @@
<ion-item-sliding #item>
<ion-item>
<icon mail item-left></icon>
<ion-icon name="mail" item-left></ion-icon>
One Line w/ Icon, div only text
</ion-item>
<ion-item-options>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -2,7 +2,7 @@
<ion-navbar *navbar>
<button menuToggle="leftMenu">
<icon menu></icon>
<ion-icon name="menu"></ion-icon>
</button>
<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({
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]
})
class MyCmpTest{}
@ -17,7 +17,7 @@ class MyCmpTest{}
<ion-navbar *navbar>
<ion-title>{{title}}</ion-title>
<ion-buttons start>
<button><icon star></icon></button>
<button><ion-icon name="star"></ion-icon></button>
</ion-buttons>
<ion-buttons end>
<button>S1</button>

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

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

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

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

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

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

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

@ -94,7 +94,7 @@ class ToolbarBackground {
template:
'<div class="toolbar-background"></div>' +
'<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-default">{{bbText}}</span>' +
'</span>' +

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

@ -32,7 +32,7 @@
</form>
<div aria-hidden="true" class="align-center">
<div aria-hidden="true" text-center>
<button (click)="setApple()" outline small>Select Apple</button>
<button (click)="setBanana()" outline small>Select Banana</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:
'<div class="searchbar-input-container">' +
'<button (click)="cancelSearchbar()" (mousedown)="cancelSearchbar()" clear dark class="searchbar-md-cancel">' +
'<icon arrow-back></icon>' +
'<ion-icon name="arrow-back"></ion-icon>' +
'</button>' +
'<div class="searchbar-search-icon"></div>' +
'<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-buttons end>
<button>
<icon search></icon>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-segment secondary>

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

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

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

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

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

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

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

@ -49,7 +49,7 @@ import {rafFrames} from '../../util/dom';
'<ion-tabbar-section>' +
'<tabbar role="tablist">' +
'<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>' +
'</a>' +
'<tab-highlight></tab-highlight>' +

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

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

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

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

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

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

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

@ -22,7 +22,7 @@
<ion-label>From:</ion-label>
<input value="Text 3" type="text">
<button clear item-right>
<icon power></icon>
<ion-icon name="power"></ion-icon>
</button>
</ion-input>
@ -32,19 +32,19 @@
</ion-input>
<ion-input>
<icon globe item-left></icon>
<ion-icon name="globe" item-left></ion-icon>
<ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
<icon mail item-left></icon>
<ion-icon name="mail" item-left></ion-icon>
<ion-label>Email:</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input>
<icon create item-left></icon>
<ion-icon name="create" item-left></ion-icon>
<ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
@ -52,7 +52,7 @@
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon>
<ion-icon name="flag" item-right></ion-icon>
</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>
<input type="text">
<button clear item-right>
<icon power></icon>
<ion-icon name="power"></ion-icon>
</button>
</ion-input>
@ -48,19 +48,19 @@
</ion-input>
<ion-input>
<icon globe item-left></icon>
<ion-icon name="globe" item-left></ion-icon>
<ion-label>Website:</ion-label>
<input value="http://ionic.io/" type="url">
</ion-input>
<ion-input>
<icon mail item-left></icon>
<ion-icon name="mail" item-left></ion-icon>
<ion-label>Email:</ion-label>
<input value="email6@email.com" type="email">
</ion-input>
<ion-input>
<icon create item-left></icon>
<ion-icon name="create" item-left></ion-icon>
<ion-label>Feedback:</ion-label>
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
@ -72,7 +72,7 @@
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon>
<ion-icon name="flag" item-right></ion-icon>
</ion-input>
<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">
@ -8,17 +10,17 @@
<ion-list inset>
<ion-input>
<icon search item-left></icon>
<ion-icon name="search" item-left></ion-icon>
<input value="Input inside an inset list" type="text">
</ion-input>
<ion-input>
<icon call item-left></icon>
<ion-icon name="call" item-left></ion-icon>
<input type="tel">
</ion-input>
<ion-input>
<icon mail item-left></icon>
<ion-icon name="mail" item-left></ion-icon>
<input placeholder="Placeholder text" type="text">
</ion-input>
@ -28,13 +30,13 @@
<ion-list 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">
</ion-input>
<ion-input inset>
<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-list>
@ -43,7 +45,7 @@
<ion-list>
<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">
<button outline item-right>Search</button>
</ion-input>
@ -54,13 +56,13 @@
<ion-card>
<ion-input>
<icon search item-left></icon>
<ion-icon name="search" item-left></ion-icon>
<input value="Input inside a card" type="text">
</ion-input>
<ion-input>
<input value="Input inside a card" type="text">
<icon mic item-right></icon>
<ion-icon name="mic" item-right></ion-icon>
</ion-input>
</ion-card>

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

@ -15,12 +15,12 @@
</ion-input>
<ion-input>
<icon call item-left></icon>
<ion-icon name="call" item-left></ion-icon>
<input placeholder="Text Input Placeholder" type="text">
</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">
</ion-input>
@ -45,12 +45,12 @@
</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">
</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">
</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 {NavController} from '../nav/nav-controller';
@ -10,6 +10,7 @@ import {Content} from '../content/content';
import {CSS, hasFocus, pointerCoord, hasPointerMoved} from '../../util/dom';
import {Platform} from '../../platform/platform';
import {Button} from '../button/button';
import {Icon} from '../icon/icon';
/**
@ -263,6 +264,28 @@ export class TextInput {
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
* On Initialization check for attributes

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

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

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

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

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

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

2
ionic/fonts/ionicons.scss
View File

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