From 1e9a776944508d99ea0e950ad715d6bd887dda22 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 3 Feb 2016 17:40:17 -0500
Subject: [PATCH] docs(demos): add icon API demo

references #5311
---
 demos/icon/index.ts           |  6 +++
 demos/icon/main.html          | 71 +++++++++++++++++++++++++++++++++++
 ionic/components/icon/icon.ts |  1 +
 3 files changed, 78 insertions(+)
 create mode 100644 demos/icon/index.ts
 create mode 100644 demos/icon/main.html

diff --git a/demos/icon/index.ts b/demos/icon/index.ts
new file mode 100644
index 0000000000..405e893db7
--- /dev/null
+++ b/demos/icon/index.ts
@@ -0,0 +1,6 @@
+import {App} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html'
+})
+class ApiDemoApp {}
diff --git a/demos/icon/main.html b/demos/icon/main.html
new file mode 100644
index 0000000000..7897a7aee8
--- /dev/null
+++ b/demos/icon/main.html
@@ -0,0 +1,71 @@
+<ion-toolbar>
+  <ion-title>Icon</ion-title>
+</ion-toolbar>
+
+<ion-content text-center class="icon-demo">
+  <ion-row>
+    <ion-col><ion-icon name='ionic' primary></ion-icon></ion-col>
+    <ion-col><ion-icon name='logo-angular'></ion-icon></ion-col>
+    <ion-col><ion-icon name='heart' danger></ion-icon></ion-col>
+    <ion-col><ion-icon name='ionitron' primary></ion-icon></ion-col>
+
+    <ion-col><ion-icon name='happy'></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-col><ion-icon name='apps'></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-col><ion-icon name='map' secondary></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='locate'></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-col><ion-icon name='microphone'></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-col><ion-icon name='wine' danger></ion-icon></ion-col>
+
+    <ion-col><ion-icon name='camera'></ion-icon></ion-col>
+    <ion-col><ion-icon name='image' secondary></ion-icon></ion-col>
+    <ion-col><ion-icon name='star'></ion-icon></ion-col>
+    <ion-col><ion-icon name='pin'></ion-icon></ion-col>
+
+    <ion-col><ion-icon name='arrow-dropup-circle'></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-col><ion-icon name='cloud'></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' primary></ion-icon></ion-col>
+  </ion-row>
+</ion-content>
+
+<style>
+  .icon-demo ion-icon {
+    font-size: 50px;
+  }
+
+  .icon-demo ion-row {
+    height: 100%;
+    padding: 0;
+    flex-wrap: wrap;
+  }
+
+  .icon-demo ion-col {
+    flex: 0 0 25%;
+    max-width: 25%;
+    text-align: center;
+    padding: 10px 5px;
+  }
+</style>
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 7b4f3ce000..7f821d867d 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -38,6 +38,7 @@ import {Config} from '../../config/config';
  * inactive icon on iOS will use an outlined version of the icon same icon.
  * Material Design icons do not change appearance depending if they're active
  * or not. The `isActive` property is largely used by the tabbar.
+ * @demo /docs/v2/demos/icon/ 
  * @see {@link /docs/v2/components#icons Icon Component Docs}
  *
  */