fix(): update to remove 'button ion-button' and add CUSTOM_ELEMENTS_SCHEMA.

src/components/action-sheet/action-sheet-component.ts

@@ -21,16 +21,16 @@ import { ViewController } from '../../navigation/view-controller';
         '<div class="action-sheet-group">' +
           '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
+          '<ion-button type="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
             '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
             '{{b.text}}' +
-          '</button>' +
+          '</ion-button>' +
         '</div>' +
         '<div class="action-sheet-group" *ngIf="d.cancelButton">' +
-          '<button ion-button="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="d.cancelButton.icon ? \'\' : null" [ngClass]="d.cancelButton.cssClass">' +
+          '<ion-button type="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="d.cancelButton.icon ? \'\' : null" [ngClass]="d.cancelButton.cssClass">' +
             '<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
             '{{d.cancelButton.text}}' +
-          '</button>' +
+          '</ion-button>' +
         '</div>' +
       '</div>' +
     '</div>',

src/components/action-sheet/test/basic/pages/modal-page/modal-page.ts

@@ -8,9 +8,9 @@ import { IonicPage, ViewController } from '../../../../../..';
   template: `
     <ion-header>
       <ion-toolbar>
-        <ion-buttons start>
+        <ion-button start>
           <button ion-button (click)="dismiss()" strong>Close</button>
-        </ion-buttons>
+        </ion-button>
         <ion-title>Modal</ion-title>
       </ion-toolbar>
     </ion-header>

src/components/action-sheet/test/basic/pages/page-one/page-one.html

@@ -9,9 +9,9 @@
 
 <ion-content padding>
 
-  <button ion-button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
-  <button ion-button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
-  <button ion-button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
+  <ion-button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</ion-button>
+  <ion-button block (click)="presentActionSheet2()">Present Action Sheet 2</ion-button>
+  <ion-button block (click)="presentActionSheet3()">Present Action Sheet 3</ion-button>
 
   <pre>
     Result: {{result}}

src/components/alert/alert-component.ts

@@ -29,23 +29,23 @@ import { AlertInputOptions, AlertOptions, AlertButton } from './alert-options';
 
         '<ng-template ngSwitchCase="radio">' +
           '<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
-            '<button ion-button="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
+            '<ion-button type="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
               '<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>' +
               '<div class="alert-radio-label">' +
                 '{{i.label}}' +
               '</div>' +
-            '</button>' +
+            '</ion-button>' +
           '</div>' +
         '</ng-template>' +
 
         '<ng-template ngSwitchCase="checkbox">' +
           '<div class="alert-checkbox-group">' +
-            '<button ion-button="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">' +
+            '<ion-button type="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">' +
               '<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
               '<div class="alert-checkbox-label">' +
                 '{{i.label}}' +
               '</div>' +
-            '</button>' +
+            '</ion-button>' +
           '</div>' +
         '</ng-template>' +
 

src/components/alert/test/basic/pages/page-one/page-one.html

@@ -9,19 +9,19 @@
 
 <ion-content padding>
 
-  <button ion-button block class="e2eOpenAlert" (click)="doAlert()">Alert</button>
-  <button ion-button block class="e2eOpenAlertLongMessage" (click)="doAlertLongMessage()">Alert Long Message</button>
-  <button ion-button block class="e2eOpenMultipleButtons" (click)="doMultipleButtons()">Multiple Buttons (>2)</button>
-  <button ion-button block class="e2eOpenAlertNoMessage" (click)="doAlertNoMessage()">Alert No Message</button>
-  <button ion-button block class="e2eOpenConfirm" (click)="doConfirm()">Confirm</button>
-  <button ion-button block class="e2eOpenPrompt" (click)="doPrompt()">Prompt</button>
-  <button ion-button block class="e2eOpenRadio" (click)="doRadio()">Radio</button>
-  <button ion-button block class="e2eOpenCheckbox" (click)="doCheckbox()">Checkbox</button>
-  <button ion-button block class="e2eFastClose" (click)="doFastClose()">Fast Close</button>
-  <button ion-button block class="e2eDisabledBackdrop" (click)="doDisabledBackdropAlert()">Disabled Backdrop Click</button>
-  <button ion-button block class="e2eAlertMode" (click)="doAlertWithMode('md')">md Mode</button>
-  <button ion-button block class="e2eAlertMode" (click)="doAlertWithMode('ios')">ios Mode</button>
-  <button ion-button block class="e2eAlertMode" (click)="doAlertWithMode('wp')">wp Mode</button>
+  <ion-button block class="e2eOpenAlert" (click)="doAlert()">Alert</ion-button>
+  <ion-button block class="e2eOpenAlertLongMessage" (click)="doAlertLongMessage()">Alert Long Message</ion-button>
+  <ion-button block class="e2eOpenMultipleButtons" (click)="doMultipleButtons()">Multiple Buttons (>2)</ion-button>
+  <ion-button block class="e2eOpenAlertNoMessage" (click)="doAlertNoMessage()">Alert No Message</ion-button>
+  <ion-button block class="e2eOpenConfirm" (click)="doConfirm()">Confirm</ion-button>
+  <ion-button block class="e2eOpenPrompt" (click)="doPrompt()">Prompt</ion-button>
+  <ion-button block class="e2eOpenRadio" (click)="doRadio()">Radio</ion-button>
+  <ion-button block class="e2eOpenCheckbox" (click)="doCheckbox()">Checkbox</ion-button>
+  <ion-button block class="e2eFastClose" (click)="doFastClose()">Fast Close</ion-button>
+  <ion-button block class="e2eDisabledBackdrop" (click)="doDisabledBackdropAlert()">Disabled Backdrop Click</ion-button>
+  <ion-button block class="e2eAlertMode" (click)="doAlertWithMode('md')">md Mode</ion-button>
+  <ion-button block class="e2eAlertMode" (click)="doAlertWithMode('ios')">ios Mode</ion-button>
+  <ion-button block class="e2eAlertMode" (click)="doAlertWithMode('wp')">wp Mode</ion-button>
 
   <pre>
     Confirm Opened: {{testConfirmOpen}}

src/components/alert/test/dismiss/app.module.ts

@@ -59,13 +59,13 @@ export class E2EPage {
           </ion-item>
         </ion-list>
         <div padding style="padding-top: 0 !important;">
-          <button ion-button list-item color="primary" block>
+          <ion-button list-item color="primary" block>
             Submit
-          </button>
+          </ion-button>
         </div>
       </form>
       <p>
-        <button ion-button block (click)="doFastPop()">Fast Loading Dismiss, Nav Pop</button>
+        <ion-button block (click)="doFastPop()">Fast Loading Dismiss, Nav Pop</ion-button>
       </p>
     </ion-content>
   `

src/components/alert/test/dismiss/main.html

@@ -19,9 +19,9 @@
   </ion-list>
 
   <div padding>
-    <button ion-button primary block (click)="submit()">
+    <ion-button primary block (click)="submit()">
       Submit
-    </button>
+    </ion-button>
   </div>
 
 </ion-content>

src/components/app/test/cordova/pages/modal/modal-page.ts

@@ -10,20 +10,20 @@ import { IonicPage, ViewController } from '../../../../../..';
     <ion-toolbar>
       <ion-title>This is a modal</ion-title>
       <ion-buttons left>
-        <button ion-button icon-only (click)="dismissModal()" class="e2eCordovaCloseModal">
+        <ion-button icon-only (click)="dismissModal()" class="e2eCordovaCloseModal">
           <ion-icon name="close"></ion-icon>
-        </button>
+        </ion-button>
       </ion-buttons>
       <ion-buttons end>
-        <button ion-button icon-only>
+        <ion-button icon-only>
           <ion-icon name="funnel"></ion-icon>
-        </button>
+        </ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
   <ion-content padding>
     <p>The modal toolbar should have status bar padding.</p>
-    <button ion-button block (click)="dismissModal()">Close modal</button>
+    <ion-button block (click)="dismissModal()">Close modal</ion-button>
   </ion-content>
   `
 })

src/components/app/test/cordova/pages/page-one/page-one.html

@@ -5,17 +5,17 @@
       <ion-segment-button value="all">All</ion-segment-button>
       <ion-segment-button value="favorites">Favorites</ion-segment-button>
     </ion-segment>
-    <button ion-button menuToggle>
+    <ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
-    </button>
+    </ion-button>
     <ion-buttons end>
-      <button ion-button icon-only>
+      <ion-button icon-only>
         <ion-icon name="search"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
-    <button ion-button menuToggle="right" right>
+    <ion-button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
-    </button>
+    </ion-button>
   </ion-navbar>
 
   <ion-toolbar>
@@ -29,8 +29,8 @@
 
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
-  <button ion-button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
-  <button ion-button block color="secondary" (click)="goToTabs()">Go to Tabs</button>
+  <ion-button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</ion-button>
+  <ion-button block color="secondary" (click)="goToTabs()">Go to Tabs</ion-button>
 
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 

src/components/item/item.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, QueryList, Renderer, Optional, ViewChild, ViewEncapsulation } from '@angular/core';
 
-import { Button } from '../button/button';
 import { Config } from '../../config/config';
 import { Form } from '../../util/form';
 import { Icon } from '../icon/icon';
@@ -412,8 +411,7 @@ export class Item extends Ion {
   /**
    * @hidden
    */
-  @ContentChildren(Button)
-  set _buttons(buttons: QueryList<Button>) {
+  set _buttons(buttons: QueryList<any>) {
     // buttons.forEach(button => {
     //   if (!button._size) {
     //     button.setElementClass('item-button', true);

src/components/menu/menu-toggle.ts

@@ -1,6 +1,5 @@
 import { Directive, Input, HostListener, Optional } from '@angular/core';
 
-import { Button } from '../button/button';
 import { MenuController } from '../app/menu-controller';
 import { Navbar } from '../toolbar/navbar';
 import { ViewController } from '../../navigation/view-controller';
@@ -110,10 +109,9 @@ export class MenuToggle {
   constructor(
     private _menu: MenuController,
     @Optional() private _viewCtrl: ViewController,
-    @Optional() private _button: Button,
     @Optional() private _navbar: Navbar
   ) {
-    this._isButton = !!_button;
+    this._isButton = false;
     this._inNavbar = !!_navbar;
   }
 

src/components/searchbar/searchbar.ts

@@ -30,9 +30,9 @@ import { Platform } from '../../platform/platform';
   selector: 'ion-searchbar',
   template:
     '<div class="searchbar-input-container">' +
-      '<button ion-button mode="md" (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel" type="button">' +
+      '<ion-button mode="md" (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear color="dark" class="searchbar-md-cancel" type="button">' +
         '<ion-icon name="md-arrow-back"></ion-icon>' +
-      '</button>' +
+      '</ion-button>' +
       '<div #searchbarIcon class="searchbar-search-icon"></div>' +
       '<input #searchbarInput class="searchbar-input" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" ' +
         '[attr.placeholder]="placeholder" ' +
@@ -40,9 +40,9 @@ import { Platform } from '../../platform/platform';
         '[attr.autocomplete]="_autocomplete" ' +
         '[attr.autocorrect]="_autocorrect" ' +
         '[attr.spellcheck]="_spellcheck">' +
-      '<button ion-button clear class="searchbar-clear-icon" [mode]="_mode" (click)="clearInput($event)" (mousedown)="clearInput($event)" type="button"></button>' +
+      '<ion-button clear class="searchbar-clear-icon" [mode]="_mode" (click)="clearInput($event)" (mousedown)="clearInput($event)" type="button"></ion-button>' +
     '</div>' +
-    '<button ion-button #cancelButton mode="ios" [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel" type="button">{{cancelButtonText}}</button>',
+    '<ion-button #cancelButton mode="ios" [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel" type="button">{{cancelButtonText}}</ion-button>',
   host: {
     '[class.searchbar-animated]': '_animated',
     '[class.searchbar-has-value]': '_value',

src/components/slides/test/basic/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 '../../../..';
 
@@ -42,6 +42,9 @@ export class AppComponent {
   entryComponents: [
     AppComponent,
     E2EPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class AppModule {}

src/components/slides/test/options/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 '../../../..';
 
@@ -48,6 +48,9 @@ export class AppComponent {
   entryComponents: [
     AppComponent,
     E2EPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class AppModule {}

src/components/slides/test/rtl/app.module.ts

@@ -1,4 +1,4 @@
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicApp, IonicModule } from  '../../../..';
 
 
@@ -41,6 +41,9 @@ export class E2EApp {
   entryComponents: [
     E2EApp,
     E2EPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class AppModule { }

src/components/slides/test/scroll/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 '../../../..';
 
@@ -28,6 +28,9 @@ export class AppComponent {
   entryComponents: [
     AppComponent,
     E2EPage
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class AppModule {}

src/components/toolbar/toolbar-item.ts

@@ -1,6 +1,5 @@
-import { ContentChildren, Directive, ElementRef, forwardRef, Optional, Inject, Renderer } from '@angular/core';
+import { Directive, ElementRef, forwardRef, Optional, Inject, Renderer } from '@angular/core';
 
-import { Button } from '../button/button';
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
 import { Navbar } from './navbar';
@@ -27,10 +26,9 @@ export class ToolbarItem extends Ion {
     this.inToolbar = !!(toolbar || navbar);
   }
 
-  @ContentChildren(Button)
   set _buttons(buttons: any) {
     if (this.inToolbar) {
-      buttons.forEach((button: Button) => {
+      buttons.forEach((button: any) => {
         // button.setRole('bar-button');
       });
     }