chore: use mat in internal templates (#7219)

src/lib/button/button.html

@@ -1,7 +1,7 @@
 <span class="mat-button-wrapper"><ng-content></ng-content></span>
-<div md-ripple class="mat-button-ripple"
+<div mat-ripple class="mat-button-ripple"
      [class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
-     [mdRippleDisabled]="_isRippleDisabled()"
-     [mdRippleCentered]="_isIconButton"
-     [mdRippleTrigger]="_getHostElement()"></div>
+     [matRippleDisabled]="_isRippleDisabled()"
+     [matRippleCentered]="_isIconButton"
+     [matRippleTrigger]="_getHostElement()"></div>
 <div class="mat-button-focus-overlay"></div>

src/lib/button/button.ts

@@ -24,6 +24,7 @@ import {
   CanColor,
   CanDisable,
   CanDisableRipple,
+  MATERIAL_COMPATIBILITY_MODE,
   mixinColor,
   mixinDisabled,
   mixinDisableRipple
@@ -130,6 +131,7 @@ export const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(Md
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdButton extends _MdButtonMixinBase
     implements OnDestroy, CanDisable, CanColor, CanDisableRipple {

src/lib/checkbox/checkbox.html

@@ -15,10 +15,10 @@
            [attr.aria-labelledby]="ariaLabelledby"
            (change)="_onInteractionEvent($event)"
            (click)="_onInputClick($event)">
-    <div md-ripple class="mat-checkbox-ripple"
-         [mdRippleTrigger]="label"
-         [mdRippleDisabled]="_isRippleDisabled()"
-         [mdRippleCentered]="true"></div>
+    <div mat-ripple class="mat-checkbox-ripple"
+         [matRippleTrigger]="label"
+         [matRippleDisabled]="_isRippleDisabled()"
+         [matRippleCentered]="true"></div>
     <div class="mat-checkbox-frame"></div>
     <div class="mat-checkbox-background">
       <svg version="1.1"

src/lib/checkbox/checkbox.ts

@@ -26,7 +26,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
   CanColor,
   CanDisable,
-  CanDisableRipple,
+  CanDisableRipple, MATERIAL_COMPATIBILITY_MODE,
   MdRipple,
   mixinColor,
   mixinDisabled,
@@ -104,6 +104,7 @@ export const _MdCheckboxMixinBase =
     '[class.mat-checkbox-label-before]': 'labelPosition == "before"',
   },
   providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
   inputs: ['disabled', 'disableRipple', 'color'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

src/lib/core/option/option.html

@@ -1,12 +1,10 @@
-<span [ngSwitch]="_isCompatibilityMode" *ngIf="multiple">
-  <mat-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchCase="true"
+<span *ngIf="multiple">
+  <mat-pseudo-checkbox class="mat-option-pseudo-checkbox"
       [state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
-  <md-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchDefault
-      [state]="selected ? 'checked' : ''" [disabled]="disabled"></md-pseudo-checkbox>
 </span>
 
 <ng-content></ng-content>
-<div class="mat-option-ripple" md-ripple
-     [mdRippleTrigger]="_getHostElement()"
-     [mdRippleDisabled]="disabled || disableRipple">
+<div class="mat-option-ripple" mat-ripple
+     [matRippleTrigger]="_getHostElement()"
+     [matRippleDisabled]="disabled || disableRipple">
 </div>

src/lib/core/option/option.ts

@@ -13,7 +13,6 @@ import {
   Input,
   Output,
   ViewEncapsulation,
-  Inject,
   Optional,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -59,6 +58,7 @@ export class MdOptionSelectionChange {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdOption {
   private _selected: boolean = false;
@@ -107,8 +107,7 @@ export class MdOption {
   constructor(
     private _element: ElementRef,
     private _changeDetectorRef: ChangeDetectorRef,
-    @Optional() public readonly group: MdOptgroup,
-    @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean) {}
+    @Optional() public readonly group: MdOptgroup) {}
 
   /**
    * Whether or not the option is currently active and ready to be selected.

src/lib/core/ripple/ripple.ts

@@ -137,7 +137,7 @@ export class MdRipple implements OnChanges, OnDestroy {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['trigger'] && this.trigger) {
+    if ((changes['trigger'] || changes['_matRippleTrigger']) && this.trigger) {
       this._rippleRenderer.setTriggerElement(this.trigger);
     }
 

src/lib/datepicker/calendar.html

@@ -1,17 +1,6 @@
 <div class="mat-calendar-header">
   <div class="mat-calendar-controls">
-    <!--
-      TODO(mmalerba): Clean up duplicated compatibility mode code when we have a better way to do
-      this.
-    -->
-
-    <!-- Check for compatibility mode and use correct prefix for md-button. -->
-    <button *ngIf="!_isCompatibilityMode" md-button class="mat-calendar-period-button"
-            (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
-      {{_periodButtonText}}
-      <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
-    </button>
-    <button *ngIf="_isCompatibilityMode" mat-button class="mat-calendar-period-button"
+    <button mat-button class="mat-calendar-period-button"
             (click)="_currentPeriodClicked()"  [attr.aria-label]="_periodButtonLabel">
       {{_periodButtonText}}
       <div class="mat-calendar-arrow" [class.mat-calendar-invert]="!_monthView"></div>
@@ -19,22 +8,12 @@
 
     <div class="mat-calendar-spacer"></div>
 
-    <!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
-    <button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-previous-button"
-            [disabled]="!_previousEnabled()" (click)="_previousClicked()"
-            [attr.aria-label]="_prevButtonLabel">
-    </button>
-    <button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-previous-button"
+    <button mat-icon-button class="mat-calendar-previous-button"
             [disabled]="!_previousEnabled()" (click)="_previousClicked()"
             [attr.aria-label]="_prevButtonLabel">
     </button>
 
-    <!-- Check for compatibility mode and use correct prefix for md-icon-button. -->
-    <button *ngIf="!_isCompatibilityMode" md-icon-button class="mat-calendar-next-button"
-            [disabled]="!_nextEnabled()" (click)="_nextClicked()"
-            [attr.aria-label]="_nextButtonLabel">
-    </button>
-    <button *ngIf="_isCompatibilityMode" mat-icon-button class="mat-calendar-next-button"
+    <button mat-icon-button class="mat-calendar-next-button"
             [disabled]="!_nextEnabled()" (click)="_nextClicked()"
             [attr.aria-label]="_nextButtonLabel">
     </button>
@@ -52,11 +31,11 @@
       (userSelection)="_userSelected()">
   </md-month-view>
 
-  <md-year-view
+  <mat-year-view
       *ngSwitchDefault
       [activeDate]="_activeDate"
       [selected]="selected"
       [dateFilter]="_dateFilterForViews"
       (selectedChange)="_monthSelected($event)">
-  </md-year-view>
+  </mat-year-view>
 </div>

src/lib/datepicker/calendar.ts

@@ -60,6 +60,7 @@ import {MdDatepickerIntl} from './datepicker-intl';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdCalendar<D> implements AfterContentInit, OnDestroy {
   private _intlChanges: Subscription;
@@ -146,7 +147,6 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
   constructor(private _elementRef: ElementRef,
               private _intl: MdDatepickerIntl,
               private _ngZone: NgZone,
-              @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) public _isCompatibilityMode: boolean,
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
               changeDetectorRef: ChangeDetectorRef) {

src/lib/datepicker/datepicker-content.html

@@ -1,4 +1,4 @@
-<md-calendar cdkTrapFocus
+<mat-calendar cdkTrapFocus
     [id]="datepicker.id"
     [startAt]="datepicker.startAt"
     [startView]="datepicker.startView"
@@ -8,4 +8,4 @@
     [selected]="datepicker._selected"
     (selectedChange)="datepicker._select($event)"
     (userSelection)="datepicker.close()">
-</md-calendar>
+</mat-calendar>

src/lib/datepicker/datepicker-toggle.html

@@ -1,10 +1,10 @@
-<button md-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
+<button mat-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
         [disabled]="disabled" (click)="_open($event)">
-  <md-icon>
+  <mat-icon>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
          fill="currentColor" style="vertical-align: top" focusable="false">
       <path d="M0 0h24v24H0z" fill="none"/>
       <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
     </svg>
-  </md-icon>
+  </mat-icon>
 </button>

src/lib/datepicker/datepicker-toggle.ts

@@ -22,6 +22,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Subscription} from 'rxjs/Subscription';
 import {merge} from 'rxjs/observable/merge';
 import {of as observableOf} from 'rxjs/observable/of';
+import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 
 
 @Component({
@@ -34,6 +35,7 @@ import {of as observableOf} from 'rxjs/observable/of';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdDatepickerToggle<D> implements OnChanges, OnDestroy {
   private _stateChanges = Subscription.EMPTY;

src/lib/datepicker/datepicker.spec.ts

@@ -249,7 +249,7 @@ describe('MdDatepicker', () => {
 
         let ownedElement = document.getElementById(ownedElementId);
         expect(ownedElement).not.toBeNull();
-        expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar');
+        expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar');
       });
 
       it('input should aria-owns calendar after opened in touch mode', () => {
@@ -267,7 +267,7 @@ describe('MdDatepicker', () => {
 
         let ownedElement = document.getElementById(ownedElementId);
         expect(ownedElement).not.toBeNull();
-        expect((ownedElement as Element).tagName.toLowerCase()).toBe('md-calendar');
+        expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar');
       });
 
       it('should throw when given wrong data type', () => {

src/lib/datepicker/datepicker.ts

@@ -36,7 +36,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
 } from '@angular/core';
-import {DateAdapter} from '@angular/material/core';
+import {DateAdapter, MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 import {MdDialog, MdDialogRef} from '@angular/material/dialog';
 import {DOCUMENT} from '@angular/platform-browser';
 import {Subject} from 'rxjs/Subject';
@@ -88,6 +88,7 @@ export const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdDatepickerContent<D> implements AfterContentInit {
   datepicker: MdDatepicker<D>;

src/lib/datepicker/month-view.html

@@ -3,7 +3,7 @@
     <tr><th *ngFor="let day of _weekdays" [attr.aria-label]="day.long">{{day.narrow}}</th></tr>
     <tr><th class="mat-calendar-table-header-divider" colspan="7" aria-hidden="true"></th></tr>
   </thead>
-  <tbody md-calendar-body
+  <tbody mat-calendar-body
          role="grid"
          [label]="_monthLabel"
          [rows]="_weeks"

src/lib/datepicker/month-view.ts

@@ -17,7 +17,10 @@ import {
   Output,
   ViewEncapsulation,
 } from '@angular/core';
-import {DateAdapter, MD_DATE_FORMATS, MdDateFormats} from '@angular/material/core';
+import {
+  DateAdapter, MATERIAL_COMPATIBILITY_MODE, MD_DATE_FORMATS,
+  MdDateFormats
+} from '@angular/material/core';
 import {MdCalendarCell} from './calendar-body';
 import {coerceDateProperty} from './coerce-date-property';
 import {createMissingDateImplError} from './datepicker-errors';
@@ -37,6 +40,7 @@ const DAYS_PER_WEEK = 7;
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdMonthView<D> implements AfterContentInit {
   /**

src/lib/datepicker/year-view.html

@@ -2,7 +2,7 @@
   <thead class="mat-calendar-table-header">
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>
-  <tbody md-calendar-body
+  <tbody mat-calendar-body
          role="grid"
          allowDisabledSelection="true"
          [label]="_yearLabel"

src/lib/list/list-item.html

@@ -1,7 +1,7 @@
 <div class="mat-list-item-content">
-  <div class="mat-list-item-ripple" md-ripple
-       [mdRippleTrigger]="_getHostElement()"
-       [mdRippleDisabled]="_isRippleDisabled()">
+  <div class="mat-list-item-ripple" mat-ripple
+       [matRippleTrigger]="_getHostElement()"
+       [matRippleDisabled]="_isRippleDisabled()">
   </div>
 
   <ng-content

src/lib/list/list-option.html

@@ -2,14 +2,14 @@
   [class.mat-list-item-content-reverse]="checkboxPosition == 'after'"
   [class.mat-list-item-disabled]="disabled">
 
-  <div md-ripple
+  <div mat-ripple
     class="mat-list-item-ripple"
-    [mdRippleTrigger]="_getHostElement()"
-    [mdRippleDisabled]="_isRippleDisabled()"></div>
+    [matRippleTrigger]="_getHostElement()"
+    [matRippleDisabled]="_isRippleDisabled()"></div>
 
-  <md-pseudo-checkbox #autocheckbox
+  <mat-pseudo-checkbox #autocheckbox
     [state]="selected ? 'checked' : 'unchecked'"
-    [disabled]="disabled"></md-pseudo-checkbox>
+    [disabled]="disabled"></mat-pseudo-checkbox>
 
   <div class="mat-list-text"><ng-content></ng-content></div>
 

src/lib/list/list.ts

@@ -19,7 +19,7 @@ import {
   ViewEncapsulation,
   ChangeDetectionStrategy,
 } from '@angular/core';
-import {MdLine, MdLineSetter} from '@angular/material/core';
+import {MATERIAL_COMPATIBILITY_MODE, MdLine, MdLineSetter} from '@angular/material/core';
 import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
 
 // Boilerplate for applying mixins to MdList.
@@ -132,6 +132,7 @@ export class MdListSubheaderCssMatStyler {}
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdListItem extends _MdListItemMixinBase implements AfterContentInit, CanDisableRipple {
   private _lineSetter: MdLineSetter;

src/lib/list/selection-list.ts

@@ -83,7 +83,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdListOption extends _MdListOptionMixinBase
     implements AfterContentInit, OnDestroy, FocusableOption, CanDisableRipple {

src/lib/menu/menu-item.html

@@ -1,3 +1,3 @@
 <ng-content></ng-content>
-<div class="mat-menu-ripple" *ngIf="!disabled" md-ripple [mdRippleTrigger]="_getHostElement()">
+<div class="mat-menu-ripple" *ngIf="!disabled" mat-ripple [matRippleTrigger]="_getHostElement()">
 </div>

src/lib/menu/menu-item.ts

@@ -14,7 +14,7 @@ import {
   OnDestroy,
   ViewEncapsulation,
 } from '@angular/core';
-import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {CanDisable, MATERIAL_COMPATIBILITY_MODE, mixinDisabled} from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
 
 // Boilerplate for applying mixins to MdMenuItem.
@@ -46,6 +46,7 @@ export const _MdMenuItemMixinBase = mixinDisabled(MdMenuItemBase);
   preserveWhitespaces: false,
   templateUrl: 'menu-item.html',
   exportAs: 'mdMenuItem, matMenuItem',
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption, CanDisable,
   OnDestroy {

src/lib/paginator/paginator.html

@@ -3,15 +3,15 @@
     {{_intl.itemsPerPageLabel}}
   </div>
 
-  <md-select *ngIf="_displayedPageSizeOptions.length > 1"
+  <mat-select *ngIf="_displayedPageSizeOptions.length > 1"
              class="mat-paginator-page-size-select"
              [value]="pageSize"
              [aria-label]="_intl.itemsPerPageLabel"
              (change)="_changePageSize($event.value)">
-    <md-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
+    <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
       {{pageSizeOption}}
-    </md-option>
-  </md-select>
+    </mat-option>
+  </mat-select>
 
   <div *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
 </div>
@@ -20,21 +20,21 @@
   {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
 </div>
 
-<button md-icon-button type="button" 
+<button mat-icon-button type="button"
         class="mat-paginator-navigation-previous"
         (click)="previousPage()"
         [attr.aria-label]="_intl.previousPageLabel"
-        [mdTooltip]="_intl.previousPageLabel"
-        [mdTooltipPosition]="'above'"
+        [matTooltip]="_intl.previousPageLabel"
+        [matTooltipPosition]="'above'"
         [disabled]="!hasPreviousPage()">
   <div class="mat-paginator-increment"></div>
 </button>
-<button md-icon-button type="button" 
+<button mat-icon-button type="button"
         class="mat-paginator-navigation-next"
         (click)="nextPage()"
         [attr.aria-label]="_intl.nextPageLabel"
-        [mdTooltip]="_intl.nextPageLabel"
-        [mdTooltipPosition]="'above'"
+        [matTooltip]="_intl.nextPageLabel"
+        [matTooltipPosition]="'above'"
         [disabled]="!hasNextPage()">
   <div class="mat-paginator-decrement"></div>
 </button>

src/lib/paginator/paginator.ts

@@ -52,9 +52,7 @@ export class PageEvent {
   host: {
     'class': 'mat-paginator',
   },
-  providers: [
-    {provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}
-  ],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

src/lib/progress-spinner/progress-spinner.html

@@ -1,6 +1,6 @@
 <!--
   preserveAspectRatio of xMidYMid meet as the center of the viewport is the circle's
-  center. The center of the circle will remain at the center of the md-progress-spinner
+  center. The center of the circle will remain at the center of the mat-progress-spinner
   element containing the SVG. `focusable="false"` prevents IE from allowing the user to
   tab into the SVG element.
 -->

src/lib/radio/radio.html

@@ -5,10 +5,10 @@
   <div class="mat-radio-container">
     <div class="mat-radio-outer-circle"></div>
     <div class="mat-radio-inner-circle"></div>
-    <div md-ripple class="mat-radio-ripple"
-         [mdRippleTrigger]="label"
-         [mdRippleDisabled]="_isRippleDisabled()"
-         [mdRippleCentered]="true"></div>
+    <div mat-ripple class="mat-radio-ripple"
+         [matRippleTrigger]="label"
+         [matRippleDisabled]="_isRippleDisabled()"
+         [matRippleCentered]="true"></div>
   </div>
 
   <input #input class="mat-radio-input cdk-visually-hidden" type="radio"

src/lib/radio/radio.ts

@@ -31,7 +31,7 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {
   RippleRef,
   UniqueSelectionDispatcher,
-  MdRipple,
+  MdRipple, MATERIAL_COMPATIBILITY_MODE,
 } from '@angular/material/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {mixinDisabled, CanDisable} from '@angular/material/core';
@@ -338,6 +338,7 @@ export const _MdRadioButtonMixinBase = mixinColor(mixinDisableRipple(MdRadioButt
     '(focus)': '_inputElement.nativeElement.focus()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdRadioButton extends _MdRadioButtonMixinBase
     implements OnInit, AfterViewInit, OnDestroy, CanColor, CanDisableRipple {

src/lib/slide-toggle/slide-toggle.html

@@ -22,10 +22,10 @@
 
       <div class="mat-slide-toggle-thumb"></div>
 
-      <div class="mat-slide-toggle-ripple" md-ripple
-           [mdRippleTrigger]="label"
-           [mdRippleCentered]="true"
-           [mdRippleDisabled]="disableRipple || disabled">
+      <div class="mat-slide-toggle-ripple" mat-ripple
+           [matRippleTrigger]="label"
+           [matRippleCentered]="true"
+           [matRippleDisabled]="disableRipple || disabled">
       </div>
 
     </div>

src/lib/slide-toggle/slide-toggle.ts

@@ -26,15 +26,20 @@ import {Platform} from '@angular/cdk/platform';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   applyCssTransform,
+  CanColor,
+  CanDisable,
+  CanDisableRipple,
   HammerInput,
+  HasTabIndex,
+  MATERIAL_COMPATIBILITY_MODE,
   MdRipple,
+  mixinColor,
+  mixinDisabled,
+  mixinDisableRipple,
+  mixinTabIndex,
   RippleRef,
 } from '@angular/material/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {mixinDisabled, CanDisable} from '@angular/material/core';
-import {CanColor, mixinColor} from '@angular/material/core';
-import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
-import {HasTabIndex, mixinTabIndex} from '@angular/material/core';
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 
 // Increasing integer for generating unique ids for slide-toggle components.
@@ -74,10 +79,11 @@ export const _MdSlideToggleMixinBase =
   templateUrl: 'slide-toggle.html',
   styleUrls: ['slide-toggle.css'],
   providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
   inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, AfterContentInit,
     ControlValueAccessor, CanDisable, CanColor, HasTabIndex, CanDisableRipple {

src/lib/stepper/step-header.html

@@ -2,8 +2,8 @@
      [class.mat-step-icon-not-touched]="icon == 'number' && !selected"
      [ngSwitch]="icon">
   <span *ngSwitchCase="'number'">{{index + 1}}</span>
-  <md-icon *ngSwitchCase="'edit'">create</md-icon>
-  <md-icon *ngSwitchCase="'done'">done</md-icon>
+  <mat-icon *ngSwitchCase="'edit'">create</mat-icon>
+  <mat-icon *ngSwitchCase="'done'">done</mat-icon>
 </div>
 <div class="mat-step-label"
      [class.mat-step-label-active]="active">

src/lib/stepper/step-header.ts

@@ -23,7 +23,7 @@ import {MdStepLabel} from './step-label';
   },
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
-  providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdStepHeader {
   /** Icon for the given step. */

src/lib/stepper/stepper-horizontal.html

@@ -1,6 +1,6 @@
 <div class="mat-horizontal-stepper-header-container">
   <ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
-    <md-step-header  class="mat-horizontal-stepper-header"
+    <mat-step-header  class="mat-horizontal-stepper-header"
                      (click)="step.select()"
                      (keydown)="_onKeydown($event)"
                      [tabIndex]="_focusIndex === i ? 0 : -1"
@@ -13,7 +13,7 @@
                      [selected]="selectedIndex === i"
                      [active]="step.completed || selectedIndex === i"
                      [optional]="step.optional">
-    </md-step-header>
+    </mat-step-header>
     <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
   </ng-container>
 </div>

src/lib/stepper/stepper-vertical.html

@@ -1,5 +1,5 @@
 <div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
-  <md-step-header  class="mat-vertical-stepper-header"
+  <mat-step-header  class="mat-vertical-stepper-header"
                    (click)="step.select()"
                    (keydown)="_onKeydown($event)"
                    [tabIndex]="_focusIndex == i ? 0 : -1"
@@ -12,7 +12,7 @@
                    [selected]="selectedIndex === i"
                    [active]="step.completed || selectedIndex === i"
                    [optional]="step.optional">
-  </md-step-header>
+  </mat-step-header>
 
   <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
     <div class="mat-vertical-stepper-content" role="tabpanel"

src/lib/stepper/stepper.spec.ts

@@ -514,7 +514,7 @@ function assertCorrectKeyboardInteraction(fixture: ComponentFixture<any>,
 /** Asserts that step selection change using stepper buttons does not focus step header. */
 function assertStepHeaderFocusNotCalled(fixture: ComponentFixture<any>) {
   let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance;
-  let stepHeaderEl = fixture.debugElement.queryAll(By.css('md-step-header'))[1].nativeElement;
+  let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement;
   let nextButtonNativeEl = fixture.debugElement
       .queryAll(By.directive(MdStepperNext))[0].nativeElement;
   spyOn(stepHeaderEl, 'focus');
@@ -577,7 +577,7 @@ function assertLinearStepperValidity(stepHeaderEl: HTMLElement,
 /** Asserts that step header focus is blurred if the step cannot be selected upon header click. */
 function assertStepHeaderBlurred(fixture: ComponentFixture<any>) {
   let stepHeaderEl = fixture.debugElement
-      .queryAll(By.css('md-step-header'))[1].nativeElement;
+      .queryAll(By.css('mat-step-header'))[1].nativeElement;
   spyOn(stepHeaderEl, 'blur');
   stepHeaderEl.click();
   fixture.detectChanges();

src/lib/stepper/stepper.ts

@@ -26,7 +26,7 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {
   defaultErrorStateMatcher,
   ErrorOptions,
-  ErrorStateMatcher,
+  ErrorStateMatcher, MATERIAL_COMPATIBILITY_MODE,
   MD_ERROR_GLOBAL_OPTIONS,
 } from '@angular/material/core';
 import {MdStepHeader} from './step-header';
@@ -107,6 +107,7 @@ export class MdStepper extends _MdStepper {
   providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdHorizontalStepper extends MdStepper { }
 
@@ -129,6 +130,7 @@ export class MdHorizontalStepper extends MdStepper { }
     ])
   ],
   providers: [{provide: MdStepper, useExisting: MdVerticalStepper}],
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
 })

src/lib/tabs/tab-group.html

@@ -1,9 +1,9 @@
-<md-tab-header #tabHeader
+<mat-tab-header #tabHeader
                [selectedIndex]="selectedIndex"
                [disableRipple]="disableRipple"
                (indexFocused)="_focusChanged($event)"
                (selectFocusedIndex)="selectedIndex = $event">
-  <div class="mat-tab-label" role="tab" mdTabLabelWrapper md-ripple
+  <div class="mat-tab-label" role="tab" matTabLabelWrapper mat-ripple
        *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
        [tabIndex]="selectedIndex == i ? 0 : -1"
@@ -11,7 +11,7 @@
        [attr.aria-selected]="selectedIndex == i"
        [class.mat-tab-label-active]="selectedIndex == i"
        [disabled]="tab.disabled"
-       [mdRippleDisabled]="disableRipple"
+       [matRippleDisabled]="disableRipple"
        (click)="tabHeader.focusIndex = selectedIndex = i">
 
     <!-- If there is a label template, use it. -->
@@ -22,10 +22,10 @@
     <!-- If there is not a label template, fall back to the text label. -->
     <ng-template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</ng-template>
   </div>
-</md-tab-header>
+</mat-tab-header>
 
 <div class="mat-tab-body-wrapper" #tabBodyWrapper>
-  <md-tab-body role="tabpanel"
+  <mat-tab-body role="tabpanel"
                *ngFor="let tab of _tabs; let i = index"
                [id]="_getTabContentId(i)"
                [attr.aria-labelledby]="_getTabLabelId(i)"
@@ -35,5 +35,5 @@
                [origin]="tab.origin"
                (onCentered)="_removeTabBodyWrapperHeight()"
                (onCentering)="_setTabBodyWrapperHeight($event)">
-  </md-tab-body>
+  </mat-tab-body>
 </div>

src/lib/tabs/tab-group.spec.ts

@@ -372,7 +372,7 @@ describe('MdTabGroup', () => {
     expect(tabLabelElement.classList.contains('mat-tab-label-active')).toBe(true);
 
     let tabContentElement = fixture.debugElement
-        .query(By.css(`md-tab-body:nth-of-type(${expectedIndex + 1})`)).nativeElement;
+        .query(By.css(`mat-tab-body:nth-of-type(${expectedIndex + 1})`)).nativeElement;
     expect(tabContentElement.classList.contains('mat-tab-body-active')).toBe(true);
   }
 

src/lib/tabs/tab-group.ts

@@ -28,7 +28,10 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Subscription} from 'rxjs/Subscription';
 import {MdTab} from './tab';
 import {merge} from 'rxjs/observable/merge';
-import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
+import {
+  CanDisableRipple, MATERIAL_COMPATIBILITY_MODE,
+  mixinDisableRipple
+} from '@angular/material/core';
 import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
 
 
@@ -69,7 +72,8 @@ export const _MdTabGroupMixinBase = mixinColor(mixinDisableRipple(MdTabGroupBase
     'class': 'mat-tab-group',
     '[class.mat-tab-group-dynamic-height]': 'dynamicHeight',
     '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
-  }
+  },
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit,
     AfterContentChecked, AfterViewChecked, OnDestroy, CanColor, CanDisableRipple {

src/lib/tabs/tab-header.html

@@ -1,6 +1,6 @@
 <div class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4"
      aria-hidden="true"
-     md-ripple [mdRippleDisabled]="_disableScrollBefore || disableRipple"
+     mat-ripple [matRippleDisabled]="_disableScrollBefore || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollBefore"
      (click)="_scrollHeader('before')">
   <div class="mat-tab-header-pagination-chevron"></div>
@@ -12,13 +12,13 @@
     <div class="mat-tab-labels">
       <ng-content></ng-content>
     </div>
-    <md-ink-bar></md-ink-bar>
+    <mat-ink-bar></mat-ink-bar>
   </div>
 </div>
 
 <div class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4"
      aria-hidden="true"
-     md-ripple [mdRippleDisabled]="_disableScrollAfter || disableRipple"
+     mat-ripple [matRippleDisabled]="_disableScrollAfter || disableRipple"
      [class.mat-tab-header-pagination-disabled]="_disableScrollAfter"
      (click)="_scrollHeader('after')">
   <div class="mat-tab-header-pagination-chevron"></div>

src/lib/tabs/tab-header.ts

@@ -27,7 +27,10 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
+import {
+  CanDisableRipple, MATERIAL_COMPATIBILITY_MODE,
+  mixinDisableRipple
+} from '@angular/material/core';
 import {fromEvent} from 'rxjs/observable/fromEvent';
 import {merge} from 'rxjs/observable/merge';
 import {of as observableOf} from 'rxjs/observable/of';
@@ -74,7 +77,8 @@ export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase);
     'class': 'mat-tab-header',
     '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',
     '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
-  }
+  },
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdTabHeader extends _MdTabHeaderMixinBase
     implements AfterContentChecked, AfterContentInit, OnDestroy, CanDisableRipple {

src/lib/tabs/tab-nav-bar/tab-nav-bar.html

@@ -1,5 +1,5 @@
 <div class="mat-tab-links" (cdkObserveContent)="_alignInkBar()">
   <ng-content></ng-content>
-  <md-ink-bar></md-ink-bar>
+  <mat-ink-bar></mat-ink-bar>
 </div>
 

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -33,7 +33,7 @@ import {
 import {
   CanColor,
   CanDisable,
-  CanDisableRipple,
+  CanDisableRipple, MATERIAL_COMPATIBILITY_MODE,
   MD_RIPPLE_GLOBAL_OPTIONS,
   MdRipple,
   mixinColor,
@@ -70,6 +70,7 @@ export const _MdTabNavMixinBase = mixinDisableRipple(mixinColor(MdTabNavBase, 'p
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdTabNav extends _MdTabNavMixinBase implements AfterContentInit, CanColor,
     CanDisableRipple, OnDestroy {

src/lib/tabs/tab.html

@@ -1,4 +1,4 @@
-<!-- Create a template for the content of the <md-tab> so that we can grab a reference to this
+<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this
     TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
     tab-group. -->
 <ng-template><ng-content></ng-content></ng-template>

src/lib/toolbar/toolbar.html

@@ -1,6 +1,6 @@
 <div class="mat-toolbar-layout">
-  <md-toolbar-row>
+  <mat-toolbar-row>
     <ng-content></ng-content>
-  </md-toolbar-row>
+  </mat-toolbar-row>
   <ng-content select="md-toolbar-row, mat-toolbar-row"></ng-content>
 </div>

src/lib/toolbar/toolbar.ts

@@ -14,7 +14,7 @@ import {
   ElementRef,
   Renderer2,
 } from '@angular/core';
-import {CanColor, mixinColor} from '@angular/material/core';
+import {CanColor, MATERIAL_COMPATIBILITY_MODE, mixinColor} from '@angular/material/core';
 
 
 @Directive({
@@ -44,6 +44,7 @@ export const _MdToolbarMixinBase = mixinColor(MdToolbarBase);
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
 })
 export class MdToolbar extends _MdToolbarMixinBase implements CanColor {