chore: use mat in internal templates (#7219)

Author: andrewseguin

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 {