fix(button): accent color not set on fab buttons with build optimizer (#9376)

When running an Angular application in production mode with the build optimizer and the Angular CLI, the code part, that sets the default color for round buttons, is removed accidentally.

This seems to be an issue, that's caused by the build optimizer: angular/devkit#388.

Fixes #9360

Author: devversion

src/demo-app/button/button-demo.html

@@ -2,17 +2,16 @@
   <section>
     <button mat-button>flat</button>
     <button mat-raised-button>raised</button>
-    <button mat-fab>
-      <mat-icon>check</mat-icon>
-    </button>
-    <button mat-fab>Btn</button>
-    <a mat-fab routerLink=".">Link</a>
+
+    <button mat-fab><mat-icon>check</mat-icon></button>
+    <button mat-fab color="primary">Btn</button>
+    <a mat-fab color="warn" routerLink=".">Link</a>
     <a mat-fab routerLink="."><mat-icon>check</mat-icon></a>
-    <button mat-mini-fab>
-      <mat-icon>check</mat-icon>
-    </button>
-    <button mat-mini-fab>Btn</button>
-    <a mat-mini-fab routerLink=".">Link</a>
+
+    <button mat-mini-fab><mat-icon>check</mat-icon></button>
+    <button mat-mini-fab color="primary">Btn</button>
+    <a mat-mini-fab color="warn" routerLink=".">Link</a>
+    <a mat-mini-fab routerLink="."><mat-icon>check</mat-icon></a>
   </section>
 
   <section>

src/lib/button/button.ts

@@ -13,11 +13,7 @@ import {
   Component,
   Directive,
   ElementRef,
-  forwardRef,
-  Inject,
   OnDestroy,
-  Optional,
-  Self,
   ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -74,30 +70,17 @@ export class MatIconButtonCssMatStyler {}
   selector: 'button[mat-fab], a[mat-fab]',
   host: {'class': 'mat-fab'}
 })
-export class MatFab {
-  constructor(@Self() @Optional() @Inject(forwardRef(() => MatButton)) button: MatButton,
-              @Self() @Optional() @Inject(forwardRef(() => MatAnchor)) anchor: MatAnchor) {
-    // Set the default color palette for the mat-fab components.
-    (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
-  }
-}
+export class MatFab {}
 
 /**
- * Directive that targets mini-fab buttons and anchors. It's used to apply the `mat-` class
- * to all mini-fab buttons and also is responsible for setting the default color palette.
+ * Directive whose purpose is to add the mat- CSS styling to this selector.
  * @docs-private
  */
 @Directive({
   selector: 'button[mat-mini-fab], a[mat-mini-fab]',
   host: {'class': 'mat-mini-fab'}
 })
-export class MatMiniFab {
-  constructor(@Self() @Optional() @Inject(forwardRef(() => MatButton)) button: MatButton,
-              @Self() @Optional() @Inject(forwardRef(() => MatAnchor)) anchor: MatAnchor) {
-    // Set the default color palette for the mat-mini-fab components.
-    (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
-  }
-}
+export class MatMiniFab {}
 
 
 // Boilerplate for applying mixins to MatButton.
@@ -139,7 +122,12 @@ export class MatButton extends _MatButtonMixinBase
               private _platform: Platform,
               private _focusMonitor: FocusMonitor) {
     super(elementRef);
+
     this._focusMonitor.monitor(this._elementRef.nativeElement, true);
+
+    if (this._isRoundButton) {
+      this.color = DEFAULT_ROUND_BUTTON_COLOR;
+    }
   }
 
   ngOnDestroy() {