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

docs(): update icon demo docs

Browse Source
This commit is contained in:
Adam Bradley
2016-01-06 21:02:52 -06:00
parent 5cccbe9ba8
commit 1d6843753a
17 changed files with 187 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
demos/animations/main.html
View File

@ -18,16 +18,15 @@
<img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
<div style="position:absolute; bottom: 0; display:inline;">
<button icon pause primary (click)="pause($event)">
<button primary (click)="pause($event)">
Pause
<icon pause></icon>
<ion-icon name="pause"></ion-icon>
</button>
<button icon play secondary (click)="play($event)">
<button secondary (click)="play($event)">
Play
<icon play></icon>
<ion-icon name="play"></ion-icon>
</button>
</div>
</body>
</html>

8
demos/buttons/main.html
View File

@ -68,7 +68,7 @@
<p>
<button dark>
<icon star></icon>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</p>
@ -76,13 +76,13 @@
<p>
<button dark>
Right Icon
<icon star></icon>
<ion-icon name="star"></ion-icon>
</button>
</p>
<p>
<button dark>
<icon star></icon>
<ion-icon name="star"></ion-icon>
</button>
</p>
@ -101,6 +101,4 @@
<button light small>Small</button>
</p>
</ion-content>

14
demos/cards/main.html
View File

@ -1,5 +1,7 @@
<ion-toolbar><ion-title>Cards</ion-title></ion-toolbar>
<ion-toolbar>
<ion-title>Cards</ion-title>
</ion-toolbar>
<ion-content class="outer-content" style="background:#eee">
@ -20,7 +22,7 @@
<ion-card>
<ion-item>
<icon pin item-left></icon>
<ion-icon name="pin" item-left></ion-icon>
ion-iteam in a card, icon left, button right
<button outline item-right>View</button>
</ion-item>
@ -36,22 +38,22 @@
<ion-card>
<a ion-item href="#">
<icon wifi item-left></icon>
<ion-icon name="wifi" item-left></ion-icon>
Card Link Item 1
</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>
<icon warning item-left></icon>
<ion-icon name="warning" item-left></ion-icon>
Card Button Item 1
</button>
<button ion-item>
<icon walk item-left></icon>
<ion-icon name="walk" item-left></ion-icon>
Card Button Item 2
</button>

3
demos/component-docs/action-sheets/basic/styles.scss
View File

@ -13,6 +13,7 @@
padding-top: 1px;
}
.md .action-sheet-cancel icon, .md .action-sheet-destructive icon {
.md .action-sheet-cancel ion-icon,
.md .action-sheet-destructive ion-icon {
color: #757575;
}

4
demos/component-docs/badge/basic/template.html
View File

@ -19,13 +19,13 @@
</ion-card-content>
<ion-item>
<ion-icon name='musical-notes' item-left style="color: #d03e84"></ion-icon>
<ion-icon name="musical-notes" item-left style="color: #d03e84"></ion-icon>
Albums
<ion-badge item-right>9</ion-badge>
</ion-item>
<ion-item>
<ion-icon name='ion-social-twitter' item-left style="color: #55acee"></ion-icon>
<ion-icon name="twitter-logo" item-left style="color: #55acee"></ion-icon>
Followers
<ion-badge item-right>260k</ion-badge>
</ion-item>

8
demos/component-docs/buttons/components/components.html
View File

@ -4,12 +4,12 @@
<ion-buttons start>
<button>
<ion-icon name='contact'></ion-icon>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button>
<ion-icon name='search'></ion-icon>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
@ -40,7 +40,7 @@
<ion-item>
Left Icon Button
<button item-right outline>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</ion-item>
@ -49,7 +49,7 @@
Right Icon Button
<button item-right outline>
Right Icon
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
</button>
</ion-item>

12
demos/component-docs/buttons/fab/fab.html
View File

@ -5,24 +5,20 @@
<ion-content class="has-header components-demo">
<p>
<button fab primary fab-top fab-left>
<ion-icon name='add'></ion-icon>
<ion-icon name="add"></ion-icon>
</button>
<button fab secondary fab-top fab-center>
<ion-icon name='compass' is-active="false"></ion-icon>
<ion-icon name="compass" is-active="false"></ion-icon>
</button>
<button fab danger fab-top fab-right>
<ion-icon name='mic' is-active="false"></ion-icon>
<ion-icon name="mic" is-active="false"></ion-icon>
</button>
<!-- <button fab dark fab-bottom fab-center id="demo-fab-bottom">
<ion-icon name=' is-active="false" heart></ion-icon>
</button> -->
</p>
</ion-content>
<button fab dark fab-bottom fab-center style="z-index: 999">
<ion-icon name='heart' is-active="false"></ion-icon>
<ion-icon name="heart" is-active="false"></ion-icon>
</button>
<ion-toolbar id="subtle-footer">
</ion-toolbar>

28
demos/component-docs/buttons/icons/icons.html
View File

@ -7,70 +7,70 @@
<p>
<button light>
<ion-icon name='arrow-back'></ion-icon>
<ion-icon name="arrow-back"></ion-icon>
Back
</button>
<button light>
<ion-icon name='arrow-down'></ion-icon>
<ion-icon name="arrow-down"></ion-icon>
</button>
<button light>
<ion-icon name='arrow-up'></ion-icon>
<ion-icon name="arrow-up"></ion-icon>
</button>
<button light>
Next
<ion-icon name='arrow-forward'></ion-icon>
<ion-icon name="arrow-forward"></ion-icon>
</button>
</p>
<p>
<button>
<ion-icon name='home'></ion-icon>
<ion-icon name="home"></ion-icon>
Home
</button>
<button outline >
<ion-icon name='briefcase' is-active="false"></ion-icon>
<ion-icon name="briefcase" is-active="false"></ion-icon>
Work
</button>
<button clear>
<ion-icon name='beer' is-active="false"></ion-icon>
<ion-icon name="beer" is-active="false"></ion-icon>
Pub
</button>
</p>
<p>
<button secondary>
<ion-icon name='people'></ion-icon>
<ion-icon name="people"></ion-icon>
Friends
</button>
<button secondary outline>
<ion-icon name='paw' is-active="false"></ion-icon>
<ion-icon name="paw" is-active="false"></ion-icon>
Best Friend
</button>
</p>
<p>
<button danger>
<ion-icon name='close'></ion-icon>
<ion-icon name="close"></ion-icon>
Remove
</button>
<button danger outline>
<ion-icon name='remove-circle' is-active="false"></ion-icon>
<ion-icon name="remove-circle" is-active="false"></ion-icon>
</button>
<button danger clear>
<ion-icon name='trash' is-active="false"></ion-icon>
<ion-icon name="trash" is-active="false"></ion-icon>
</button>
</p>
<p>
<button dark round>
<ion-icon name='construct' is-active="false"></ion-icon>
<ion-icon name="construct" is-active="false"></ion-icon>
Tools
</button>
<button dark clear>
<ion-icon name='hammer' is-active="false"></ion-icon>
<ion-icon name="hammer" is-active="false"></ion-icon>
</button>
</p>

30
demos/component-docs/cards/advanced-map/template.html
View File

@ -9,19 +9,19 @@
<div style="position: relative">
<img src="img/advance-card-map-madison.png">
<button fab fab-right fab-top class="fab-map">
<ion-icon name='pin'></ion-icon>
<ion-icon name="pin"></ion-icon>
</button>
</div>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='football'></ion-icon>
<ion-icon name="football"></ion-icon>
</ion-avatar>
<h2>Museum of Football</h2>
<p>11 N. Way St, Madison, WI 53703</p>
</ion-item>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='wine'></ion-icon>
<ion-icon name="wine"></ion-icon>
</ion-avatar>
<h2>Institute of Fine Cocktails</h2>
<p>14 S. Hop Avenue, Madison, WI 53703</p>
@ -30,7 +30,7 @@
<span item-left class="item-bold">18 min</span>
<span item-left class="item-subtle">(2.6 mi)</span>
<button primary clear item-right>
<ion-icon name='navigate'></ion-icon>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
@ -41,19 +41,19 @@
<div style="position: relative">
<img src="img/advance-card-map-mario.png">
<button danger fab fab-right fab-top class="fab-map">
<ion-icon name='pin'></ion-icon>
<ion-icon name="pin"></ion-icon>
</button>
</div>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='cloud'></ion-icon>
<ion-icon name="cloud"></ion-icon>
</ion-avatar>
<h2>Yoshi's Island</h2>
<h2>Yoshi"s Island</h2>
<p>Iggy Koopa</p>
</ion-item>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='leaf'></ion-icon>
<ion-icon name="leaf"></ion-icon>
</ion-avatar>
<h2>Forest of Illusion</h2>
<p>Roy Koopa</p>
@ -62,7 +62,7 @@
<span item-left class="item-bold">3 hr</span>
<span item-left class="item-subtle">(4.8 mi)</span>
<button danger clear item-right>
<ion-icon name='navigate'></ion-icon>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
@ -73,19 +73,19 @@
<div style="position: relative">
<img src="img/advance-card-map-paris.png">
<button secondary fab fab-right fab-top class="fab-map">
<ion-icon name='pin'></ion-icon>
<ion-icon name="pin"></ion-icon>
</button>
</div>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='information-circle'></ion-icon>
<ion-icon name="information-circle"></ion-icon>
</ion-avatar>
<h2>Museum of Information</h2>
<p>44 Rue de Info, 75010 Paris, France</p>
</ion-item>
<ion-item>
<ion-avatar item-left class="icon-avatar">
<ion-icon name='leaf'></ion-icon>
<ion-icon name="leaf"></ion-icon>
</ion-avatar>
<h2>General Pharmacy</h2>
<p>1 Avenue Faux, 75010 Paris, France</p>
@ -94,7 +94,7 @@
<span item-left secondary class="item-bold">26 min</span>
<span item-left class="item-subtle">(8.1 mi)</span>
<button secondary clear item-right>
<ion-icon name='navigate'></ion-icon>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
@ -103,7 +103,3 @@
</ion-content>

18
demos/component-docs/cards/advanced-social/template.html
View File

@ -23,11 +23,11 @@
<ion-item actions class="demo-card">
<button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name='text'></ion-icon>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
<p item-left class="time-ago">
@ -56,11 +56,11 @@
<ion-item actions class="demo-card">
<button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon>
<ion-icon name="thumbs-up"></ion-icon>
<div>30 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name='text'></ion-icon>
<ion-icon name="text"></ion-icon>
<div>64 Comments</div>
</button>
<p item-left class="time-ago">
@ -84,16 +84,16 @@
<img src="img/advance-card-jp.jpg">
<ion-card-content>
<p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they should.</p>
<p>Your scientists were so preoccupied with whether or not they could, that they didn"t stop to think if they should.</p>
</ion-card-content>
<ion-item actions class="demo-card">
<button primary clear item-left>
<ion-icon name='thumbs-up'></ion-icon>
<ion-icon name="thumbs-up"></ion-icon>
<div>46 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name='text'></ion-icon>
<ion-icon name="text"></ion-icon>
<div>66 Comments</div>
</button>
<p item-left class="time-ago">2d ago</p>
@ -103,7 +103,3 @@
</ion-content>

10
demos/component-docs/cards/advanced-weather/template.html
View File

@ -14,7 +14,7 @@
</ion-item>
<p class="advanced-background-title advanced-background-title-large">
<ion-icon name='moon'></ion-icon>
<ion-icon name="moon"></ion-icon>
<span>23&deg;</span>
</p>
@ -34,7 +34,7 @@
</ion-item>
<p class="advanced-background-title advanced-background-title-large">
<ion-icon name='sunny'></ion-icon>
<ion-icon name="sunny"></ion-icon>
<span>78&deg;</span>
</p>
@ -54,7 +54,7 @@
</ion-item>
<p class="advanced-background-title advanced-background-title-large">
<ion-icon name='thunderstorm'></ion-icon>
<ion-icon name="thunderstorm"></ion-icon>
<span>41&deg;</span>
</p>
@ -67,7 +67,3 @@
</ion-content>

30
demos/component-docs/cards/image/template.html
View File

@ -20,15 +20,15 @@
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -46,21 +46,21 @@
Erykah Badu
</h2>
<p>
American singer-songwriter, record producer, activist, and actress, Badu's style is a prime example of neo-soul.
American singer-songwriter, record producer, activist, and actress, Badu"s style is a prime example of neo-soul.
</p>
</ion-card-content>
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -84,15 +84,15 @@
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -116,15 +116,15 @@
<ion-item actions class="demo-card">
<button clear item-left danger>
<ion-icon name='star'></ion-icon>
<ion-icon name="star"></ion-icon>
Favorite
</button>
<button clear item danger>
<ion-icon name='musical-notes'></ion-icon>
<ion-icon name="musical-notes"></ion-icon>
Listen
</button>
<button clear item-right danger>
<ion-icon name='share-alt'></ion-icon>
<ion-icon name="share-alt"></ion-icon>
Share
</button>
</ion-item>
@ -134,7 +134,3 @@
</ion-content>

12
demos/component-docs/cards/list/template.html
View File

@ -12,32 +12,32 @@
<ion-list>
<button ion-item>
<ion-icon name='cart' item-left></ion-icon>
<ion-icon name="cart" item-left></ion-icon>
Shopping
</button>
<button ion-item>
<ion-icon name='medical' item-left></ion-icon>
<ion-icon name="medical" item-left></ion-icon>
Hospital
</button>
<button ion-item>
<ion-icon name='cafe' item-left></ion-icon>
<ion-icon name="cafe" item-left></ion-icon>
Cafe
</button>
<button ion-item>
<ion-icon name='paw' item-left></ion-icon>
<ion-icon name="paw" item-left></ion-icon>
Dog Park
</button>
<button ion-item>
<ion-icon name='beer' item-left></ion-icon>
<ion-icon name="beer" item-left></ion-icon>
Pub
</button>
<button ion-item>
<ion-icon name='planet' item-left></ion-icon>
<ion-icon name="planet" item-left></ion-icon>
Space
</button>

66
demos/component-docs/icons/basic/template.html
View File

@ -6,69 +6,69 @@
<ion-content class="has-header preview-icons">
<ion-row>
<ion-col><ion-icon name='ionic'></ion-icon></ion-col>
<ion-col><ion-icon name='ion-social-angular'></ion-icon></ion-col>
<ion-col><ion-icon name='ionitron'></ion-icon></ion-col>
<ion-col><ion-icon name="ionic"></ion-icon></ion-col>
<ion-col><ion-icon name="angular-logo"></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='heart'></ion-icon></ion-col>
<ion-col><ion-icon name='apps'></ion-icon></ion-col>
<ion-col><ion-icon name='happy'></ion-icon></ion-col>
<ion-col><ion-icon name="heart"></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="happy"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='people'></ion-icon></ion-col>
<ion-col><ion-icon name='person'></ion-icon></ion-col>
<ion-col><ion-icon name='contact'></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='lock'></ion-icon></ion-col>
<ion-col><ion-icon name='key'></ion-icon></ion-col>
<ion-col><ion-icon name='unlock'></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key"></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='map'></ion-icon></ion-col>
<ion-col><ion-icon name='navigate'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name="map"></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='mic'></ion-icon></ion-col>
<ion-col><ion-icon name='musical-notes'></ion-icon></ion-col>
<ion-col><ion-icon name='volume-up'></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes"></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='cafe'></ion-icon></ion-col>
<ion-col><ion-icon name='calculator'></ion-icon></ion-col>
<ion-col><ion-icon name='bus'></ion-icon></ion-col>
<ion-col><ion-icon name="cafe"></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='camera'></ion-icon></ion-col>
<ion-col><ion-icon name='cube'></ion-icon></ion-col>
<ion-col><ion-icon name='image'></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="cube"></ion-icon></ion-col>
<ion-col><ion-icon name="image"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='star'></ion-icon></ion-col>
<ion-col><ion-icon name='wine'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name="star"></ion-icon></ion-col>
<ion-col><ion-icon name="wine"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='arrow-back'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-dropdown'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-forward'></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
</ion-row>
<ion-row>
<ion-col><ion-icon name='sunny'></ion-icon></ion-col>
<ion-col><ion-icon name='umbrella'></ion-icon></ion-col>
<ion-col><ion-icon name='rainy'></ion-icon></ion-col>
<ion-col><ion-icon name="sunny"></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy"></ion-icon></ion-col>
</ion-row>
</ion-content>

8
demos/component-docs/navigation/basic/navigation.html
View File

@ -7,22 +7,22 @@
<ion-list>
<button ion-item (click)="openNavDetailsPage('Angular')">
<ion-icon name='ion-social-angular' item-left></ion-icon>
<ion-icon name='angular-logo' item-left></ion-icon>
Angular
</button>
<button ion-item (click)="openNavDetailsPage('CSS3')">
<ion-icon name='ion-social-css3' item-left></ion-icon>
<ion-icon name='css3-logo' item-left></ion-icon>
CSS3
</button>
<button ion-item (click)="openNavDetailsPage('HTML5')">
<ion-icon name='ion-social-html5' item-left></ion-icon>
<ion-icon name='html5-logo' item-left></ion-icon>
HTML5
</button>
<button ion-item (click)="openNavDetailsPage('Sass')">
<ion-icon name='ion-social-sass' item-left></ion-icon>
<ion-icon name='sass-logo' item-left></ion-icon>
Sass
</button>

8
demos/component-docs/navigation/basic/pages.ts
View File

@ -18,10 +18,10 @@ class NavigationDetailsPage {
'Sass': "Syntactically Awesome Stylesheets - a mature, stable, and powerful professional grade CSS extension."
};
var navIcons = {
'Angular': 'ion-social-angular',
'CSS3': 'ion-social-css3',
'HTML5': 'ion-social-html5',
'Sass': 'ion-social-sass'
'Angular': 'angular-logo',
'CSS3': 'css3-logo',
'HTML5': 'html5-logo',
'Sass': 'sass-logo'
};
this.selection['content'] = navData[this.selection.title];
this.selection['icon'] = navIcons[this.selection.title];

19
demos/icons/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
@ -33,12 +33,12 @@
</ion-item>
<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
@ -46,7 +46,7 @@
</ion-item>
<ion-item>
<icon pizza item-left></icon>
<ion-icon name="pizza" item-left></ion-icon>
Pizza
<ion-note item-right>
Always
@ -54,7 +54,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
@ -62,7 +62,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
@ -71,7 +71,4 @@
</ion-list>
</ion-content>