From a61d0aff46213434398b0792a49f4ad3a6e93bdb Mon Sep 17 00:00:00 2001
From: Josh Thomas <josh@ionic.io>
Date: Mon, 1 May 2017 11:46:27 -0500
Subject: [PATCH] chore(): updating button tests.

---
 src/components/button/button.ts               |  8 ++-
 .../button/test/anchors/app/app.component.ts  | 10 ----
 .../button/test/anchors/app/app.module.ts     | 19 -------
 .../button/test/anchors/app/main.ts           |  5 --
 src/components/button/test/anchors/e2e.ts     |  1 -
 .../test/anchors/pages/page-one/page-one.html | 52 -------------------
 .../anchors/pages/page-one/page-one.module.ts | 17 ------
 .../test/anchors/pages/page-one/page-one.ts   | 22 --------
 .../attributes/pages/page-one/page-one.html   | 44 ++++++++--------
 .../pages/page-one/page-one.module.ts         |  5 +-
 .../test/basic/pages/page-one/page-one.html   | 40 +++++++-------
 .../basic/pages/page-one/page-one.module.ts   |  5 +-
 .../test/block/pages/page-one/page-one.html   | 14 ++---
 .../block/pages/page-one/page-one.module.ts   |  5 +-
 .../test/clear/pages/page-one/page-one.html   | 26 +++++-----
 .../clear/pages/page-one/page-one.module.ts   |  5 +-
 .../decorator/pages/page-one/page-one.html    | 36 ++++++-------
 .../pages/page-one/page-one.module.ts         |  5 +-
 .../test/dynamic/pages/page-one/page-one.html | 30 +++++------
 .../dynamic/pages/page-one/page-one.module.ts |  5 +-
 .../test/full/pages/page-one/page-one.html    | 12 ++---
 .../full/pages/page-one/page-one.module.ts    |  5 +-
 .../test/icons/pages/page-one/page-one.html   | 36 ++++++-------
 .../icons/pages/page-one/page-one.module.ts   |  5 +-
 .../test/outline/pages/page-one/page-one.html | 34 ++++++------
 .../outline/pages/page-one/page-one.module.ts |  5 +-
 .../button/test/raised/app.module.ts          |  5 +-
 src/components/button/test/raised/main.html   | 22 ++++----
 .../test/round/pages/page-one/page-one.html   | 20 +++----
 .../round/pages/page-one/page-one.module.ts   |  5 +-
 .../test/sizes/pages/page-one/page-one.html   | 14 ++---
 .../sizes/pages/page-one/page-one.module.ts   |  5 +-
 .../slides/test/control/app.module.ts         |  5 +-
 33 files changed, 223 insertions(+), 304 deletions(-)
 delete mode 100644 src/components/button/test/anchors/app/app.component.ts
 delete mode 100644 src/components/button/test/anchors/app/app.module.ts
 delete mode 100644 src/components/button/test/anchors/app/main.ts
 delete mode 100644 src/components/button/test/anchors/e2e.ts
 delete mode 100644 src/components/button/test/anchors/pages/page-one/page-one.html
 delete mode 100644 src/components/button/test/anchors/pages/page-one/page-one.module.ts
 delete mode 100644 src/components/button/test/anchors/pages/page-one/page-one.ts

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 7209436ea6..0b6bd0e7ae 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -89,6 +89,7 @@ export class Button {
    */
   @Prop() default: boolean = false;
 
+  @Prop() disabled: boolean = false;
   /**
    * @input {boolean} If true, activates a transparent button style with a border.
    * Type: style
@@ -228,9 +229,14 @@ export class Button {
         return prevValue;
       }, {});
 
+    console.log(this.disabled);
+
     return h(this,
       h('div', {
-        class: buttonClasses
+        class: buttonClasses,
+        props: {
+          disabled: this.disabled
+        }
       },
         [
           h('span', {
diff --git a/src/components/button/test/anchors/app/app.component.ts b/src/components/button/test/anchors/app/app.component.ts
deleted file mode 100644
index a356c9ea9b..0000000000
--- a/src/components/button/test/anchors/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-import { PageOne } from '../pages/page-one/page-one';
-
-@Component({
-  template: '<ion-nav [root]="rootPage"></ion-nav>'
-})
-export class AppComponent {
-  rootPage = PageOne;
-}
diff --git a/src/components/button/test/anchors/app/app.module.ts b/src/components/button/test/anchors/app/app.module.ts
deleted file mode 100644
index 472cd840ec..0000000000
--- a/src/components/button/test/anchors/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { IonicApp, IonicModule } from '../../../../..';
-
-import { AppComponent } from './app.component';
-import { PageOneModule } from '../pages/page-one/page-one.module';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    IonicModule.forRoot(AppComponent),
-    PageOneModule
-  ],
-  bootstrap: [IonicApp]
-})
-export class AppModule {}
diff --git a/src/components/button/test/anchors/app/main.ts b/src/components/button/test/anchors/app/main.ts
deleted file mode 100644
index 6af7a5b2ae..0000000000
--- a/src/components/button/test/anchors/app/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/components/button/test/anchors/e2e.ts b/src/components/button/test/anchors/e2e.ts
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/button/test/anchors/e2e.ts
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/button/test/anchors/pages/page-one/page-one.html b/src/components/button/test/anchors/pages/page-one/page-one.html
deleted file mode 100644
index 20aa4b626b..0000000000
--- a/src/components/button/test/anchors/pages/page-one/page-one.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<ion-header>
-
-  <ion-toolbar>
-    <ion-title>Anchor Buttons</ion-title>
-  </ion-toolbar>
-
-</ion-header>
-
-
-<ion-content padding style="text-align:center" no-bounce>
-
-  <p>
-    <a ion-button>Default</a>
-    <a ion-button class="activated">Default.activated</a>
-  </p>
-
-  <p>
-    <a ion-button color="primary">Primary</a>
-    <a ion-button color="primary" class="activated">Primary.activated</a>
-  </p>
-
-  <p>
-    <a ion-button color="secondary">Secondary</a>
-    <a ion-button color="secondary" class="activated">Secondary.activated</a>
-  </p>
-
-  <p>
-    <a ion-button color="danger">Danger</a>
-    <a ion-button color="danger" class="activated">Danger.activated</a>
-  </p>
-
-  <p>
-    <a ion-button color="light">Light</a>
-    <a ion-button color="light" class="activated">Light.activated</a>
-  </p>
-
-  <p>
-    <a ion-button color="dark">Dark</a>
-    <a ion-button color="dark" class="activated">Dark.activated</a>
-  </p>
-
-  <p>
-    <a ion-button disabled>A Disabled</a>
-    <a ion-button color="secondary" disabled>Secondary Disabled</a>
-  </p>
-
-  <p>
-    <a ion-button [color]="btnColor" (click)="chgColor()">Change Color</a>
-    <a ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</a>
-  </p>
-
-</ion-content>
diff --git a/src/components/button/test/anchors/pages/page-one/page-one.module.ts b/src/components/button/test/anchors/pages/page-one/page-one.module.ts
deleted file mode 100644
index 8b48a5850d..0000000000
--- a/src/components/button/test/anchors/pages/page-one/page-one.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { IonicPageModule } from '../../../../../..';
-
-import { PageOne } from './page-one';
-
-@NgModule({
-  declarations: [
-    PageOne,
-  ],
-  imports: [
-    IonicPageModule.forChild(PageOne),
-  ],
-  entryComponents: [
-    PageOne,
-  ]
-})
-export class PageOneModule {}
diff --git a/src/components/button/test/anchors/pages/page-one/page-one.ts b/src/components/button/test/anchors/pages/page-one/page-one.ts
deleted file mode 100644
index 5b20c1059c..0000000000
--- a/src/components/button/test/anchors/pages/page-one/page-one.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-import { App } from '../../../../../..';
-
-@Component({
-  templateUrl: 'page-one.html'
-})
-export class PageOne {
-  btnColor: string;
-  testingColors = ['primary', 'secondary', 'danger', 'dark'];
-  testingColorIndex = 0;
-
-  constructor(app: App) {
-    app.setTitle('Basic Buttons');
-    this.chgColor();
-  }
-
-  chgColor() {
-    this.btnColor = this.testingColors[this.testingColorIndex];
-    console.log('dynamic btnColor', this.btnColor);
-    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
-  }
-}
diff --git a/src/components/button/test/attributes/pages/page-one/page-one.html b/src/components/button/test/attributes/pages/page-one/page-one.html
index 9b31e5c9dd..6dfacc9bf1 100644
--- a/src/components/button/test/attributes/pages/page-one/page-one.html
+++ b/src/components/button/test/attributes/pages/page-one/page-one.html
@@ -2,10 +2,10 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button ion-button>Default</button>
-      <button ion-button solid>Solid</button>
-      <button ion-button outline>Outline</button>
-      <button ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</button>
+      <ion-button>Default</ion-button>
+      <ion-button solid>Solid</ion-button>
+      <ion-button outline>Outline</ion-button>
+      <ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</ion-button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -14,26 +14,26 @@
 
 <ion-content padding style="text-align:center" no-bounce>
   <h5>Button Displays</h5>
-  <button ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</button>
-  <button ion-button [full]="isFull">Full</button>
-  <button ion-button full block>Both</button>
+  <ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</ion-button>
+  <ion-button [full]="isFull">Full</ion-button>
+  <ion-button full block>Both</ion-button>
 
   <h5>Button Styles (Click to Toggle)</h5>
-  <button ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</button>
-  <button ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</button>
-  <button ion-button [clear]="isClear" (click)="toggleStyles()">Clear</button>
+  <ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</ion-button>
+  <ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</ion-button>
+  <ion-button [clear]="isClear" (click)="toggleStyles()">Clear</ion-button>
 
   <h5>Button Sizes</h5>
-  <button ion-button small="true">Small</button>
-  <button ion-button default="true">Default</button>
-  <button ion-button large>Large</button>
+  <ion-button small="true">Small</ion-button>
+  <ion-button default="true">Default</ion-button>
+  <ion-button large>Large</ion-button>
 
   <h5>Button Colors (Click to Toggle)</h5>
-  <button ion-button block [color]="isSecondary" (click)="toggleColors()">Block</button>
-  <button ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</button>
-  <button ion-button outline [color]="isDark" (click)="toggleColors()">Outline</button>
-  <button ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</button>
-  <button ion-button (click)="removeColors()">Remove Colors</button>
+  <ion-button block [color]="isSecondary" (click)="toggleColors()">Block</ion-button>
+  <ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</ion-button>
+  <ion-button outline [color]="isDark" (click)="toggleColors()">Outline</ion-button>
+  <ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</ion-button>
+  <ion-button (click)="removeColors()">Remove Colors</ion-button>
 
 </ion-content>
 
@@ -41,10 +41,10 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button ion-button color="secondary">Default</button>
-      <button ion-button solid color="danger">Solid</button>
-      <button ion-button outline color="dark">Outline</button>
-      <button ion-button clear color="secondary">Clear</button>
+      <ion-button color="secondary">Default</ion-button>
+      <ion-button solid color="danger">Solid</ion-button>
+      <ion-button outline color="dark">Outline</ion-button>
+      <ion-button clear color="secondary">Clear</ion-button>
     </ion-buttons>
   </ion-toolbar>
 
diff --git a/src/components/button/test/attributes/pages/page-one/page-one.module.ts b/src/components/button/test/attributes/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/attributes/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/attributes/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/basic/pages/page-one/page-one.html b/src/components/button/test/basic/pages/page-one/page-one.html
index f8211d938d..d9b0aad26c 100644
--- a/src/components/button/test/basic/pages/page-one/page-one.html
+++ b/src/components/button/test/basic/pages/page-one/page-one.html
@@ -8,45 +8,45 @@
 
 
 <ion-content padding style="text-align:center" no-bounce>
-
+<!--
   <p>
-    <button ion-button (click)="test($event)">Default</button>
-    <button ion-button (click)="test($event)" class="activated">Default.activated</button>
+    <ion-button (click)="test($event)">Default</ion-button>
+    <ion-button (click)="test($event)" class="activated">Default.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button color="primary">Primary</button>
-    <button ion-button color="primary" class="activated">Primary.activated</button>
+    <ion-button color="primary">Primary</ion-button>
+    <ion-button color="primary" class="activated">Primary.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button color="secondary">Secondary</button>
-    <button ion-button color="secondary" class="activated">Secondary.activated</button>
+    <ion-button color="secondary">Secondary</ion-button>
+    <ion-button color="secondary" class="activated">Secondary.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button color="danger">Danger</button>
-    <button ion-button color="danger" class="activated">Danger.activated</button>
+    <ion-button color="danger">Danger</ion-button>
+    <ion-button color="danger" class="activated">Danger.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button color="light">Light</button>
-    <button ion-button color="light" class="activated">Light.activated</button>
+    <ion-button color="light">Light</ion-button>
+    <ion-button color="light" class="activated">Light.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button color="dark">Dark</button>
-    <button ion-button color="dark" class="activated">Dark.activated</button>
+    <ion-button color="dark">Dark</ion-button>
+    <ion-button color="dark" class="activated">Dark.activated</ion-button>
   </p>
-
+-->
   <p>
-    <button ion-button disabled>Button Disabled</button>
-    <button ion-button color="secondary" disabled>Secondary Disabled</button>
+    <ion-button disabled large clear>Button Disabled</ion-button>
+    <ion-button color="secondary" disabled>Secondary Disabled</ion-button>
   </p>
-
+<!--
   <p>
-    <button ion-button [color]="btnColor" (click)="chgColor()">Change Color</button>
-    <button ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</button>
+    <ion-button [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
+    <ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
   </p>
-
+-->
 </ion-content>
diff --git a/src/components/button/test/basic/pages/page-one/page-one.module.ts b/src/components/button/test/basic/pages/page-one/page-one.module.ts
index 0f5e31b5f2..f498de7c5e 100644
--- a/src/components/button/test/basic/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/basic/pages/page-one/page-one.module.ts
@@ -1,5 +1,5 @@
 
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -13,6 +13,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/block/pages/page-one/page-one.html b/src/components/button/test/block/pages/page-one/page-one.html
index 8e71b845ad..772dce908b 100644
--- a/src/components/button/test/block/pages/page-one/page-one.html
+++ b/src/components/button/test/block/pages/page-one/page-one.html
@@ -11,36 +11,36 @@
 
   <p>
     <a ion-button block href="#">a[ion-button][block]</a>
-    <button ion-button block>button[ion-button][block]</button>
+    <ion-button block>button[ion-button][block]</ion-button>
   </p>
 
   <p>
     <a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
-    <button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
+    <ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button>
   </p>
 
   <p>
     <a ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</a>
-    <button ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</button>
+    <ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</ion-button>
   </p>
 
   <p>
     <a ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</a>
-    <button ion-button block clear color="dark">button[ion-button][clear][block][dark]</button>
+    <ion-button block clear color="dark">button[ion-button][clear][block][dark]</ion-button>
   </p>
 
   <p>
     <a ion-button block round href="#">a[ion-button][block][round]</a>
-    <button ion-button block round>button[ion-button][block][round]</button>
+    <ion-button block round>button[ion-button][block][round]</ion-button>
   </p>
 
   <p>
     <a ion-button block round outline href="#">a[ion-button][block][round][outline]</a>
-    <button ion-button block round outline>button[ion-button][block][round][outline]</button>
+    <ion-button block round outline>button[ion-button][block][round][outline]</ion-button>
   </p>
 
   <p>
-    <button ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
+    <ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/block/pages/page-one/page-one.module.ts b/src/components/button/test/block/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/block/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/block/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/clear/pages/page-one/page-one.html b/src/components/button/test/clear/pages/page-one/page-one.html
index ed46bce976..cdbdad2c0e 100644
--- a/src/components/button/test/clear/pages/page-one/page-one.html
+++ b/src/components/button/test/clear/pages/page-one/page-one.html
@@ -10,37 +10,37 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button ion-button clear>Default</button>
-    <button ion-button clear class="activated">Default.activated</button>
+    <ion-button clear>Default</ion-button>
+    <ion-button clear class="activated">Default.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button clear color="primary">Primary</button>
-    <button ion-button clear color="primary" class="activated">Primary.activated</button>
+    <ion-button clear color="primary">Primary</ion-button>
+    <ion-button clear color="primary" class="activated">Primary.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button clear color="secondary">Secondary</button>
-    <button ion-button clear color="secondary" class="activated">Secondary.activated</button>
+    <ion-button clear color="secondary">Secondary</ion-button>
+    <ion-button clear color="secondary" class="activated">Secondary.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button clear color="danger">Danger</button>
-    <button ion-button clear color="danger" class="activated">Danger.activated</button>
+    <ion-button clear color="danger">Danger</ion-button>
+    <ion-button clear color="danger" class="activated">Danger.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button clear color="light">Light</button>
-    <button ion-button clear color="light" class="activated">Light.activated</button>
+    <ion-button clear color="light">Light</ion-button>
+    <ion-button clear color="light" class="activated">Light.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button clear color="dark">Dark</button>
-    <button ion-button clear color="dark" class="activated">Dark.activated</button>
+    <ion-button clear color="dark">Dark</ion-button>
+    <ion-button clear color="dark" class="activated">Dark.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
+    <ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/clear/pages/page-one/page-one.module.ts b/src/components/button/test/clear/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/clear/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/clear/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/decorator/pages/page-one/page-one.html b/src/components/button/test/decorator/pages/page-one/page-one.html
index 118ac14ec1..f237ec1250 100644
--- a/src/components/button/test/decorator/pages/page-one/page-one.html
+++ b/src/components/button/test/decorator/pages/page-one/page-one.html
@@ -3,9 +3,9 @@
   <ion-toolbar>
     <ion-title>Outline Buttons</ion-title>
     <ion-buttons end>
-      <button ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
+      <ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
         {{strong ? 'Done' : 'Edit' }}
-      </button>
+      </ion-button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -15,43 +15,43 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <button ion-button [strong]="strong" small>Default (small)</button>
-    <button ion-button strong small>Default (small)</button>
+    <ion-button [strong]="strong" small>Default (small)</ion-button>
+    <ion-button strong small>Default (small)</ion-button>
   </p>
 
   <p>
-    <button ion-button outline [strong]="strong" color="secondary">Outline</button>
-    <button ion-button outline strong color="secondary">Outline</button>
+    <ion-button outline [strong]="strong" color="secondary">Outline</ion-button>
+    <ion-button outline strong color="secondary">Outline</ion-button>
   </p>
 
   <p>
-    <button ion-button block [strong]="strong" color="danger" large>Block (large)</button>
-    <button ion-button block strong color="danger" large>Block (large)</button>
+    <ion-button block [strong]="strong" color="danger" large>Block (large)</ion-button>
+    <ion-button block strong color="danger" large>Block (large)</ion-button>
   </p>
 
   <p>
-    <button ion-button full [strong]="strong" color="dark">Full</button>
-    <button ion-button full strong color="dark">Default</button>
+    <ion-button full [strong]="strong" color="dark">Full</ion-button>
+    <ion-button full strong color="dark">Default</ion-button>
   </p>
 
   <p>
-    <button ion-button raised [strong]="strong" color="light">Raised</button>
-    <button ion-button raised strong color="light">Raised</button>
+    <ion-button raised [strong]="strong" color="light">Raised</ion-button>
+    <ion-button raised strong color="light">Raised</ion-button>
   </p>
 
   <p>
-    <button ion-button round [strong]="strong">Round</button>
-    <button ion-button round strong>Round</button>
+    <ion-button round [strong]="strong">Round</ion-button>
+    <ion-button round strong>Round</ion-button>
   </p>
 
   <p>
-    <button ion-button clear [strong]="strong">Clear</button>
-    <button ion-button clear strong>Clear</button>
+    <ion-button clear [strong]="strong">Clear</ion-button>
+    <ion-button clear strong>Clear</ion-button>
   </p>
 
   <p>
-    <button ion-button clear [strong]="strong">Default</button>
-    <button ion-button clear strong>Default</button>
+    <ion-button clear [strong]="strong">Default</ion-button>
+    <ion-button clear strong>Default</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/decorator/pages/page-one/page-one.module.ts b/src/components/button/test/decorator/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/decorator/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/decorator/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/dynamic/pages/page-one/page-one.html b/src/components/button/test/dynamic/pages/page-one/page-one.html
index 35d587a618..d83eab404b 100644
--- a/src/components/button/test/dynamic/pages/page-one/page-one.html
+++ b/src/components/button/test/dynamic/pages/page-one/page-one.html
@@ -2,12 +2,12 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button color="danger" *ngIf="showIf">ngIf</button>
-      <button ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
+      <ion-button color="danger" *ngIf="showIf">ngIf</ion-button>
+      <ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
     <ion-buttons end>
-      <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
+      <ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</ion-button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -16,25 +16,25 @@
 
 <ion-content padding>
 
-  <button ion-button block [solid]="isSolid">Solid</button>
-  <button ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
-  <button ion-button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</button>
-  <button ion-button block [color]="myColor1" [round]="isCustom">Custom #1</button>
-  <button ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
+  <ion-button block [solid]="isSolid">Solid</ion-button>
+  <ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</ion-button>
+  <ion-button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</ion-button>
+  <ion-button block [color]="myColor1" [round]="isCustom">Custom #1</ion-button>
+  <ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</ion-button>
   <hr/>
-  <button ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</button>
-  <button ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</button>
+  <ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</ion-button>
+  <ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</ion-button>
   <hr/>
-  <button ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</button>
+  <ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</ion-button>
   <hr/>
-  <button ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
-  <button ion-button block clear color="danger" (click)="reset()">Reset all buttons</button>
-  <button ion-button small *ngFor="let button of buttons"
+  <ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</ion-button>
+  <ion-button block clear color="danger" (click)="reset()">Reset all buttons</ion-button>
+  <ion-button small *ngFor="let button of buttons"
           [outline]="!button.selected && button.value !== value"
           [color]="(button.selected || button.value === value) ? button.value : 'secondary'"
           (click)="setValue(button.value)">
     <ion-icon *ngIf="button.icon" name="{{button.icon}}"></ion-icon>
     {{button.text}}
-  </button>
+  </ion-button>
 
 </ion-content>
diff --git a/src/components/button/test/dynamic/pages/page-one/page-one.module.ts b/src/components/button/test/dynamic/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/dynamic/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/dynamic/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/full/pages/page-one/page-one.html b/src/components/button/test/full/pages/page-one/page-one.html
index 0fc256fde6..fc141171e7 100644
--- a/src/components/button/test/full/pages/page-one/page-one.html
+++ b/src/components/button/test/full/pages/page-one/page-one.html
@@ -11,7 +11,7 @@
 
   <p>
     <a ion-button full href="#">a[ion-button][full]</a>
-    <button ion-button full>button[ion-button][full]</button>
+    <ion-button full>button[ion-button][full]</ion-button>
   </p>
 
   <p>
@@ -19,25 +19,25 @@
       <ion-icon name="help-circle"></ion-icon>
       a[ion-button][full] + icon
     </a>
-    <button ion-button full icon-left>
+    <ion-button full icon-left>
       <ion-icon name="help-circle"></ion-icon>
       button[ion-button][full] + icon
-    </button>
+    </ion-button>
   </p>
 
   <p>
     <a ion-button full outline color="secondary" href="#">a[ion-button][full][outline][secondary]</a>
-    <button ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</button>
+    <ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</ion-button>
   </p>
 
   <p>
     <a ion-button full clear color="light" href="#">a[ion-button][full][clear][light]</a>
-    <button ion-button full clear color="light">button[ion-button][full][clear][light]</button>
+    <ion-button full clear color="light">button[ion-button][full][clear][light]</ion-button>
   </p>
 
   <p>
     <a ion-button full clear color="dark" href="#">a[ion-button][full][clear][dark]</a>
-    <button ion-button full clear color="dark">button[ion-button][full][clear][dark]</button>
+    <ion-button full clear color="dark">button[ion-button][full][clear][dark]</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/full/pages/page-one/page-one.module.ts b/src/components/button/test/full/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/full/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/full/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/icons/pages/page-one/page-one.html b/src/components/button/test/icons/pages/page-one/page-one.html
index 478de32a98..02fa604861 100644
--- a/src/components/button/test/icons/pages/page-one/page-one.html
+++ b/src/components/button/test/icons/pages/page-one/page-one.html
@@ -10,10 +10,10 @@
 <ion-content padding>
 
   <div>
-    <button ion-button icon-left>
+    <ion-button icon-left>
       <ion-icon name="home"></ion-icon>
       Left Icon
-    </button>
+    </ion-button>
     <a ion-button icon-left>
       <ion-icon name="home"></ion-icon>
       Left Icon
@@ -21,10 +21,10 @@
   </div>
 
   <div>
-    <button ion-button icon-right>
+    <ion-button icon-right>
       Right Icon
       <ion-icon name="star"></ion-icon>
-    </button>
+    </ion-button>
     <a ion-button icon-right>
       Right Icon
       <ion-icon name="star"></ion-icon>
@@ -32,19 +32,19 @@
   </div>
 
   <div>
-    <button ion-button icon-only>
+    <ion-button icon-only>
       <ion-icon name="flag"></ion-icon>
-    </button>
+    </ion-button>
     <a ion-button icon-only>
       <ion-icon name="flag"></ion-icon>
     </a>
   </div>
 
   <div>
-    <button ion-button large icon-left>
+    <ion-button large icon-left>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
-    </button>
+    </ion-button>
     <a ion-button large icon-left>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
@@ -52,10 +52,10 @@
   </div>
 
   <div>
-    <button ion-button large icon-right>
+    <ion-button large icon-right>
       Right, Large
       <ion-icon name="settings"></ion-icon>
-    </button>
+    </ion-button>
     <a ion-button large icon-right>
       Right, Large
       <ion-icon name="settings"></ion-icon>
@@ -63,19 +63,19 @@
   </div>
 
   <div>
-    <button ion-button large icon-only>
+    <ion-button large icon-only>
       <ion-icon name="heart"></ion-icon>
-    </button>
+    </ion-button>
     <a ion-button large icon-only>
       <ion-icon name="heart"></ion-icon>
     </a>
   </div>
 
   <div>
-    <button ion-button small icon-left>
+    <ion-button small icon-left>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
-    </button>
+    </ion-button>
     <a ion-button small icon-left>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
@@ -83,10 +83,10 @@
   </div>
 
   <div>
-    <button ion-button small icon-right>
+    <ion-button small icon-right>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
-    </button>
+    </ion-button>
     <a ion-button small icon-right>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
@@ -94,9 +94,9 @@
   </div>
 
   <div>
-    <button ion-button small icon-only>
+    <ion-button small icon-only>
       <ion-icon name="search"></ion-icon>
-    </button>
+    </ion-button>
     <a ion-button small icon-only>
       <ion-icon name="search"></ion-icon>
     </a>
diff --git a/src/components/button/test/icons/pages/page-one/page-one.module.ts b/src/components/button/test/icons/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/icons/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/icons/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/outline/pages/page-one/page-one.html b/src/components/button/test/outline/pages/page-one/page-one.html
index 3435e06bbd..30f9d5ca21 100644
--- a/src/components/button/test/outline/pages/page-one/page-one.html
+++ b/src/components/button/test/outline/pages/page-one/page-one.html
@@ -10,53 +10,53 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <button ion-button outline>Default</button>
-    <button ion-button outline class="activated">Default.activated</button>
+    <ion-button outline>Default</ion-button>
+    <ion-button outline class="activated">Default.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button outline color="primary">Primary</button>
-    <button ion-button outline color="primary" class="activated">Primary.activated</button>
+    <ion-button outline color="primary">Primary</ion-button>
+    <ion-button outline color="primary" class="activated">Primary.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button outline color="secondary">Secondary</button>
-    <button ion-button outline color="secondary" class="activated">Secondary.activated</button>
+    <ion-button outline color="secondary">Secondary</ion-button>
+    <ion-button outline color="secondary" class="activated">Secondary.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button outline color="danger">Danger</button>
-    <button ion-button outline color="danger" class="activated">Danger.activated</button>
+    <ion-button outline color="danger">Danger</ion-button>
+    <ion-button outline color="danger" class="activated">Danger.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button outline color="light">Light</button>
-    <button ion-button outline color="light" class="activated">Light.activated</button>
+    <ion-button outline color="light">Light</ion-button>
+    <ion-button outline color="light" class="activated">Light.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button outline color="dark">Dark</button>
-    <button ion-button outline color="dark" class="activated">Dark.activated</button>
+    <ion-button outline color="dark">Dark</ion-button>
+    <ion-button outline color="dark" class="activated">Dark.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button outline block>button[ion-button][outline][block]</button>
+    <ion-button outline block>button[ion-button][outline][block]</ion-button>
   </p>
 
   <p>
-    <button ion-button outline block class="activated">[outline][block].activated</button>
+    <ion-button outline block class="activated">[outline][block].activated</ion-button>
   </p>
 
   <p>
-    <button ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</button>
+    <ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</ion-button>
   </p>
 
   <p>
-    <button ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</button>
+    <ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</ion-button>
   </p>
 
   <p>
-    <button ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
+    <ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/outline/pages/page-one/page-one.module.ts b/src/components/button/test/outline/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/outline/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/outline/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/raised/app.module.ts b/src/components/button/test/raised/app.module.ts
index 20982bd470..c624404f00 100644
--- a/src/components/button/test/raised/app.module.ts
+++ b/src/components/button/test/raised/app.module.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../..';
 
@@ -27,6 +27,9 @@ export class AppComponent {
   bootstrap: [IonicApp],
   entryComponents: [
     E2EPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class AppModule {}
diff --git a/src/components/button/test/raised/main.html b/src/components/button/test/raised/main.html
index c55675bbdf..cd4de877d6 100644
--- a/src/components/button/test/raised/main.html
+++ b/src/components/button/test/raised/main.html
@@ -10,32 +10,32 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button ion-button raised><span>Default</span></button>
-    <button ion-button raised raised class="activated">Default.activated</button>
+    <ion-button raised><span>Default</span></ion-button>
+    <ion-button raised raised class="activated">Default.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button raised outline>Outline</button>
-    <button ion-button raised outline class="activated">Outline.activated</button>
+    <ion-button raised outline>Outline</ion-button>
+    <ion-button raised outline class="activated">Outline.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button raised clear>Clear</button>
-    <button ion-button raised clear class="activated">Clear.activated</button>
+    <ion-button raised clear>Clear</ion-button>
+    <ion-button raised clear class="activated">Clear.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button raised round>Round</button>
-    <button ion-button raised round class="activated">Round.activated</button>
+    <ion-button raised round>Round</ion-button>
+    <ion-button raised round class="activated">Round.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button raised block>Block</button>
-    <button ion-button raised block class="activated">Block.activated</button>
+    <ion-button raised block>Block</ion-button>
+    <ion-button raised block class="activated">Block.activated</ion-button>
   </p>
 
   <p>
-    <button ion-button raised clear disabled>Clear Disabled</button>
+    <ion-button raised clear disabled>Clear Disabled</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/round/pages/page-one/page-one.html b/src/components/button/test/round/pages/page-one/page-one.html
index 1f426ef0e8..c5d4166d32 100644
--- a/src/components/button/test/round/pages/page-one/page-one.html
+++ b/src/components/button/test/round/pages/page-one/page-one.html
@@ -9,17 +9,17 @@
 
 <ion-content padding>
 
-  <button ion-button round>button</button>
-  <button ion-button round color="light">button light</button>
-  <button ion-button round color="secondary">button secondary</button>
-  <button ion-button round color="danger">button danger</button>
-  <button ion-button round color="dark">button dark</button>
+  <ion-button round>button</ion-button>
+  <ion-button round color="light">button light</ion-button>
+  <ion-button round color="secondary">button secondary</ion-button>
+  <ion-button round color="danger">button danger</ion-button>
+  <ion-button round color="dark">button dark</ion-button>
 
-  <button ion-button round outline>button</button>
-  <button ion-button round color="light" outline>button light</button>
-  <button ion-button round color="secondary" outline>button secondary</button>
-  <button ion-button round color="danger" outline>button danger</button>
-  <button ion-button round color="dark" outline>button dark</button>
+  <ion-button round outline>button</ion-button>
+  <ion-button round color="light" outline>button light</ion-button>
+  <ion-button round color="secondary" outline>button secondary</ion-button>
+  <ion-button round color="danger" outline>button danger</ion-button>
+  <ion-button round color="dark" outline>button dark</ion-button>
 
 </ion-content>
 
diff --git a/src/components/button/test/round/pages/page-one/page-one.module.ts b/src/components/button/test/round/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/round/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/round/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/button/test/sizes/pages/page-one/page-one.html b/src/components/button/test/sizes/pages/page-one/page-one.html
index 040754c000..635818df50 100644
--- a/src/components/button/test/sizes/pages/page-one/page-one.html
+++ b/src/components/button/test/sizes/pages/page-one/page-one.html
@@ -11,26 +11,26 @@
 
   <p>
     <a ion-button href="#">a[ion-button]</a>
-    <button ion-button>button</button>
+    <ion-button>button</ion-button>
   </p>
 
   <p>
     <a ion-button small href="#">a[ion-button][small]</a>
-    <button ion-button small>button[ion-button][small]</button>
+    <ion-button small>button[ion-button][small]</ion-button>
   </p>
 
   <p>
     <a ion-button outline small href="#">a[ion-button][outline][small]</a>
-    <button ion-button outline small>button[ion-button][outline][small]</button>
+    <ion-button outline small>button[ion-button][outline][small]</ion-button>
   </p>
 
   <p>
     <a ion-button clear small href="#">a[ion-button][clear][small]</a>
-    <button ion-button clear small>button[ion-button][clear][small]</button>
+    <ion-button clear small>button[ion-button][clear][small]</ion-button>
   </p>
 
   <p>
-    <button ion-button large>[large]</button>
+    <ion-button large>[large]</ion-button>
     <a ion-button large href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
@@ -41,12 +41,12 @@
 
   <p>
     <a ion-button outline large href="#">a[ion-button][outline][large]</a>
-    <button ion-button outline large>button[ion-button][outline][large]</button>
+    <ion-button outline large>button[ion-button][outline][large]</ion-button>
   </p>
 
   <p>
     <a ion-button clear large href="#">a[clear][large]</a>
-    <button ion-button clear large>button[ion-button][clear][large]</button>
+    <ion-button clear large>button[ion-button][clear][large]</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/sizes/pages/page-one/page-one.module.ts b/src/components/button/test/sizes/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/button/test/sizes/pages/page-one/page-one.module.ts
+++ b/src/components/button/test/sizes/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/slides/test/control/app.module.ts b/src/components/slides/test/control/app.module.ts
index 70390ecdf7..0af527d10d 100644
--- a/src/components/slides/test/control/app.module.ts
+++ b/src/components/slides/test/control/app.module.ts
@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../..';
 
@@ -30,6 +30,9 @@ export class AppComponent {
   entryComponents: [
     AppComponent,
     MyPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class AppModule {}