From b3f8a423215b2d8d3690b11b1ceeb4d17faf3867 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Tue, 23 Jan 2018 16:47:31 +0100
Subject: [PATCH] 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: 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 211d2c0c33b..bb08ba2f87b 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 f4d29fc28b4..537b4652b1c 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() {