From 10804d1afd42c9fa7b12faf7e619effc20012a17 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 13 Jan 2018 13:41:53 +0100
Subject: [PATCH] fix(button): accent color not set on fab buttons with build
 optimizer

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: https://github.com/angular/devkit/issues/388.

Fixes #9360
---
 src/demo-app/button/button-demo.html | 19 +++++++++----------
 src/lib/button/button.ts             | 28 ++++++++--------------------
 2 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html
index 211d2c0c33b9..bb08ba2f87b7 100644
--- a/src/demo-app/button/button-demo.html
+++ b/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>
diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts
index f4d29fc28b4d..537b4652b1c3 100644
--- a/src/lib/button/button.ts
+++ b/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() {