fix(button): square ripple in compatibility mode (#3167)

* Fixes the ripple not being clipped in compatibility mode. The issue was due to the check not including the `mat-` selectors.
* Reduces the amount of DOM manipulation done by the button.

Fixes #3164.

Author: crisbeto

src/lib/button/button.html

@@ -1,6 +1,6 @@
 <span class="mat-button-wrapper"><ng-content></ng-content></span>
 <div md-ripple *ngIf="!_isRippleDisabled()" class="mat-button-ripple"
-    [class.mat-button-ripple-round]="_isRoundButton()"
+    [class.mat-button-ripple-round]="_isRoundButton"
     [mdRippleTrigger]="_getHostElement()"></div>
 <!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
 <div class="mat-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>

src/lib/button/button.ts

@@ -106,6 +106,12 @@ export class MdButton {
   /** Whether a mousedown has occurred on this element in the last 100ms. */
   _isMouseDown: boolean = false;
 
+  /** Whether the button is round. */
+  _isRoundButton: boolean = ['icon-button', 'fab', 'mini-fab'].some(suffix => {
+    let el = this._getHostElement();
+    return el.hasAttribute('md-' + suffix) || el.hasAttribute('mat-' + suffix);
+  });
+
   /** Whether the ripple effect on click should be disabled. */
   private _disableRipple: boolean = false;
   private _disabled: boolean = null;
@@ -165,13 +171,6 @@ export class MdButton {
     return this._elementRef.nativeElement;
   }
 
-  _isRoundButton() {
-    const el = this._getHostElement();
-    return el.hasAttribute('md-icon-button') ||
-        el.hasAttribute('md-fab') ||
-        el.hasAttribute('md-mini-fab');
-  }
-
   _isRippleDisabled() {
     return this.disableRipple || this.disabled;
   }