docs(demos): update icons to use name attr

demos/component-docs/badge/basic/template.html

@@ -19,13 +19,13 @@
     </ion-card-content>
 
     <ion-item>
-      <ion-icon 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 ion-social-twitter item-left style="color: #55acee"></ion-icon>
+      <ion-icon name='ion-social-twitter' item-left style="color: #55acee"></ion-icon>
       Followers
       <ion-badge item-right>260k</ion-badge>
     </ion-item>

demos/component-docs/buttons/components/components.html

@@ -4,12 +4,12 @@
 
   <ion-buttons start>
     <button>
-      <ion-icon contact></ion-icon>
+      <ion-icon name='contact'></ion-icon>
     </button>
   </ion-buttons>
   <ion-buttons end>
   <button>
-    <ion-icon 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 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 star></ion-icon>
+        <ion-icon name='star'></ion-icon>
       </button>
     </ion-item>
 

demos/component-docs/buttons/fab/fab.html

@@ -5,22 +5,22 @@
 <ion-content class="has-header components-demo">
   <p>
     <button fab primary fab-top fab-left>
-      <ion-icon add></ion-icon>
+      <ion-icon name='add'></ion-icon>
     </button>
     <button fab secondary fab-top fab-center>
-      <ion-icon is-active="false" compass></ion-icon>
+      <ion-icon name='compass' is-active="false"></ion-icon>
     </button>
     <button fab danger fab-top fab-right>
-      <ion-icon is-active="false" mic></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 is-active="false" heart></ion-icon>
+      <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 is-active="false" heart></ion-icon>
+  <ion-icon name='heart' is-active="false"></ion-icon>
 </button>
 
 <ion-toolbar id="subtle-footer">

demos/component-docs/buttons/icons/icons.html

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

demos/component-docs/cards/advanced-map/template.html

@@ -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 pin></ion-icon>
+      <ion-icon name='pin'></ion-icon>
     </button>
   </div>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <ion-icon 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 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 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 pin></ion-icon>
+      <ion-icon name='pin'></ion-icon>
     </button>
   </div>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <ion-icon cloud></ion-icon>
+      <ion-icon name='cloud'></ion-icon>
     </ion-avatar>
     <h2>Yoshi's Island</h2>
     <p>Iggy Koopa</p>
   </ion-item>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <ion-icon 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 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 pin></ion-icon>
+      <ion-icon name='pin'></ion-icon>
     </button>
   </div>
   <ion-item>
     <ion-avatar item-left class="icon-avatar">
-      <ion-icon 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 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 navigate></ion-icon>
+      <ion-icon name='navigate'></ion-icon>
       Start
     </button>
   </ion-item>

demos/component-docs/cards/advanced-social/template.html

@@ -23,11 +23,11 @@
 
   <ion-item actions class="demo-card">
     <button primary clear item-left>
-      <ion-icon thumbs-up></ion-icon>
+      <ion-icon name='thumbs-up'></ion-icon>
       <div>12 Likes</div>
     </button>
     <button primary clear item-left>
-      <ion-icon 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 thumbs-up></ion-icon>
+      <ion-icon name='thumbs-up'></ion-icon>
       <div>30 Likes</div>
     </button>
     <button primary clear item-left>
-      <ion-icon text></ion-icon>
+      <ion-icon name='text'></ion-icon>
       <div>64 Comments</div>
     </button>
     <p item-left class="time-ago">
@@ -89,11 +89,11 @@
 
   <ion-item actions class="demo-card">
       <button primary clear item-left>
-        <ion-icon thumbs-up></ion-icon>
+        <ion-icon name='thumbs-up'></ion-icon>
         <div>46 Likes</div>
       </button>
       <button primary clear item-left>
-        <ion-icon text></ion-icon>
+        <ion-icon name='text'></ion-icon>
         <div>66 Comments</div>
       </button>
       <p item-left class="time-ago">2d ago</p>

demos/component-docs/cards/advanced-weather/template.html

@@ -14,7 +14,7 @@
   </ion-item>
 
   <p class="advanced-background-title advanced-background-title-large">
-    <ion-icon 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 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 thunderstorm></ion-icon>
+    <ion-icon name='thunderstorm'></ion-icon>
     <span>41&deg;</span>
   </p>
 

demos/component-docs/cards/image/template.html

@@ -20,15 +20,15 @@
 
     <ion-item actions class="demo-card">
       <button clear item-left danger>
-        <ion-icon star></ion-icon>
+        <ion-icon name='star'></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <ion-icon musical-notes></ion-icon>
+        <ion-icon name='musical-notes'></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <ion-icon share-alt></ion-icon>
+        <ion-icon name='share-alt'></ion-icon>
         Share
       </button>
     </ion-item>
@@ -52,15 +52,15 @@
 
     <ion-item actions class="demo-card">
       <button clear item-left danger>
-        <ion-icon star></ion-icon>
+        <ion-icon name='star'></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <ion-icon musical-notes></ion-icon>
+        <ion-icon name='musical-notes'></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <ion-icon 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 star></ion-icon>
+        <ion-icon name='star'></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <ion-icon musical-notes></ion-icon>
+        <ion-icon name='musical-notes'></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <ion-icon 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 star></ion-icon>
+        <ion-icon name='star'></ion-icon>
         Favorite
       </button>
       <button clear item danger>
-        <ion-icon musical-notes></ion-icon>
+        <ion-icon name='musical-notes'></ion-icon>
         Listen
       </button>
       <button clear item-right danger>
-        <ion-icon share-alt></ion-icon>
+        <ion-icon name='share-alt'></ion-icon>
         Share
       </button>
     </ion-item>

demos/component-docs/cards/list/template.html

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

demos/component-docs/icons/basic/template.html

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

demos/component-docs/lists/icon/template.html

@@ -11,7 +11,7 @@
     </ion-list-header>
 
     <ion-item>
-      <ion-icon planet item-left></ion-icon>
+      <ion-icon name='planet' item-left></ion-icon>
       Astronomy
       <ion-note item-right>
       To the moon
@@ -19,18 +19,18 @@
     </ion-item>
 
     <ion-toggle checked="false">
-      <ion-icon body item-left></ion-icon>
+      <ion-icon name='body' item-left></ion-icon>
       Muggle Studies
     </ion-toggle>
 
     <ion-item>
-      <ion-icon leaf item-left></ion-icon>
+      <ion-icon name='leaf' item-left></ion-icon>
       Herbology
-      <ion-icon rose item-right id="secondary"></ion-icon>
+      <ion-icon name='rose' item-right id="secondary"></ion-icon>
     </ion-item>
 
     <ion-item>
-      <ion-icon flask item-left></ion-icon>
+      <ion-icon name='flask' item-left></ion-icon>
       Potions
       <ion-note item-right>
       Poisonous
@@ -50,17 +50,17 @@
 
     <ion-item>
       Incantation
-      <ion-icon color-wand item-left></ion-icon>
+      <ion-icon name='color-wand' item-left></ion-icon>
       <ion-note item-right>Crucio!</ion-note>
     </ion-item>
 
     <ion-toggle checked="true">
-      <ion-icon brush item-left></ion-icon>
+      <ion-icon name='brush' item-left></ion-icon>
       Quidditch Practice
     </ion-toggle>
 
     <ion-item>
-      <ion-icon wine item-left></ion-icon>
+      <ion-icon name='wine' item-left></ion-icon>
       Mead Drinking
       <ion-note item-right>Yes please</ion-note>
     </ion-item>
@@ -75,19 +75,19 @@
     </ion-list-header>
 
     <ion-item>
-      <ion-icon flash item-left></ion-icon>
+      <ion-icon name='flash' item-left></ion-icon>
       Harry
       <ion-note item-right>The boy who lived</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-icon book item-left></ion-icon>
+      <ion-icon name='book' item-left></ion-icon>
       Hermoine
       <ion-note item-right>Muggle-born</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-icon beer item-left></ion-icon>
+      <ion-icon name='beer' item-left></ion-icon>
       Ron
       <ion-note item-right>Brilliant!</ion-note>
     </ion-item>

demos/component-docs/menus/basic/menu-events.html

@@ -2,7 +2,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle>
-    <ion-icon menu></ion-icon>
+    <ion-icon name='menu'></ion-icon>
   </button>
 
   <ion-title>

demos/component-docs/menus/basic/menu-friends.html

@@ -1,7 +1,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle="leftMenu">
-    <ion-icon menu></ion-icon>
+    <ion-icon name='menu'></ion-icon>
   </button>
 
   <ion-title>

demos/component-docs/menus/basic/menu-home.html

@@ -1,7 +1,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle>
-    <ion-icon menu></ion-icon>
+    <ion-icon name='menu'></ion-icon>
   </button>
 
   <ion-title>

demos/component-docs/menus/basic/menu-places.html

@@ -1,7 +1,7 @@
 <ion-navbar *navbar hideBackButton class="android-attr">
 
   <button menuToggle="leftMenu">
-    <ion-icon menu></ion-icon>
+    <ion-icon name='menu'></ion-icon>
   </button>
 
   <ion-title>

demos/component-docs/modals/basic/modal-content.html

@@ -7,7 +7,7 @@
       Cancel
     </button>
     <button (click)="close()" *ng-if=" currentPlatform === 'android' ">
-      <ion-icon close></ion-icon>
+      <ion-icon name='close'></ion-icon>
     </button>
   </ion-buttons>
 </ion-toolbar>

demos/component-docs/navigation/basic/navigation.html

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