From 6d4413ff231dbe0d6f5d6baf1c9c96f4716445f5 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 31 Jan 2018 01:10:46 +0100
Subject: [PATCH] refactor(datepicker): remove MatIconModule dependency (#9499)

Removes the dependency between the `MatDatepickerModule` and `MatIconModule`, because we were only using a handful of styles but were pulling in all of the overhead that comes with the icon module (e.g. the icon registry, the dependency to the `HttpClientModule` etc.).
---
 src/lib/datepicker/BUILD.bazel            | 17 ++++++++++++++++-
 src/lib/datepicker/datepicker-module.ts   |  2 --
 src/lib/datepicker/datepicker-toggle.html | 19 ++++++++++++-------
 src/lib/datepicker/datepicker-toggle.scss |  6 ++++++
 src/lib/datepicker/datepicker-toggle.ts   |  1 +
 5 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/datepicker/datepicker-toggle.scss

diff --git a/src/lib/datepicker/BUILD.bazel b/src/lib/datepicker/BUILD.bazel
index c09f65c292f..8984b3c6593 100644
--- a/src/lib/datepicker/BUILD.bazel
+++ b/src/lib/datepicker/BUILD.bazel
@@ -9,6 +9,7 @@ ng_module(
   module_name = "@angular/material/datepicker",
   assets = [
     ":datepicker_content_css",
+    ":datepicker_toggle_css",
     ":calendar_body_css",
     ":calendar_css",
   ],
@@ -16,7 +17,6 @@ ng_module(
     "//src/lib/core",
     "//src/lib/button",
     "//src/lib/dialog",
-    "//src/lib/icon",
     "//src/lib/input",
     "//src/cdk/a11y",
     "//src/cdk/bidi",
@@ -35,6 +35,12 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
+sass_binary(
+  name = "datepicker_toggle_scss",
+  src = "datepicker-toggle.scss",
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
 sass_binary(
   name = "calendar_scss",
   src = "calendar.scss",
@@ -56,6 +62,15 @@ genrule(
   cmd = "cat $(locations :datepicker_content_scss) > $@",
 )
 
+# TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
+# Copy the output of the sass_binary such that the filename and path match what we expect.
+genrule(
+  name = "datepicker_toggle_css",
+  srcs = [":datepicker_toggle_scss"],
+  outs = ["datepicker-toggle.css"],
+  cmd = "cat $(locations :datepicker_toggle_scss) > $@",
+)
+
 # TODO(jelbourn): remove this when sass_binary supports specifying an output filename and dir.
 # Copy the output of the sass_binary such that the filename and path match what we expect.
 genrule(
diff --git a/src/lib/datepicker/datepicker-module.ts b/src/lib/datepicker/datepicker-module.ts
index b74d52604d2..d79643787b0 100644
--- a/src/lib/datepicker/datepicker-module.ts
+++ b/src/lib/datepicker/datepicker-module.ts
@@ -12,7 +12,6 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
-import {MatIconModule} from '@angular/material/icon';
 import {MatCalendar} from './calendar';
 import {MatCalendarBody} from './calendar-body';
 import {
@@ -33,7 +32,6 @@ import {MatYearView} from './year-view';
     CommonModule,
     MatButtonModule,
     MatDialogModule,
-    MatIconModule,
     OverlayModule,
     A11yModule,
   ],
diff --git a/src/lib/datepicker/datepicker-toggle.html b/src/lib/datepicker/datepicker-toggle.html
index 09d41a5c633..c2d27e824b7 100644
--- a/src/lib/datepicker/datepicker-toggle.html
+++ b/src/lib/datepicker/datepicker-toggle.html
@@ -1,12 +1,17 @@
 <button mat-icon-button type="button" [attr.aria-label]="_intl.openCalendarLabel"
         [disabled]="disabled" (click)="_open($event)">
-  <mat-icon *ngIf="!_customIcon">
-    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor"
-        style="vertical-align: top" focusable="false">
-      <path d="M0 0h24v24H0z" fill="none"/>
-      <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
-    </svg>
-  </mat-icon>
+
+  <svg
+    *ngIf="!_customIcon"
+    class="mat-datepicker-toggle-default-icon"
+    viewBox="0 0 24 24"
+    width="24px"
+    height="24px"
+    fill="currentColor"
+    focusable="false">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
+  </svg>
 
   <ng-content select="[matDatepickerToggleIcon]"></ng-content>
 </button>
diff --git a/src/lib/datepicker/datepicker-toggle.scss b/src/lib/datepicker/datepicker-toggle.scss
new file mode 100644
index 00000000000..83945870700
--- /dev/null
+++ b/src/lib/datepicker/datepicker-toggle.scss
@@ -0,0 +1,6 @@
+.mat-datepicker-toggle-default-icon {
+  .mat-form-field-prefix &,
+  .mat-form-field-suffix & {
+    width: 1em;
+  }
+}
diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts
index 3911bd9dd21..52a3415af47 100644
--- a/src/lib/datepicker/datepicker-toggle.ts
+++ b/src/lib/datepicker/datepicker-toggle.ts
@@ -38,6 +38,7 @@ export class MatDatepickerToggleIcon {}
   moduleId: module.id,
   selector: 'mat-datepicker-toggle',
   templateUrl: 'datepicker-toggle.html',
+  styleUrls: ['datepicker-toggle.css'],
   host: {
     'class': 'mat-datepicker-toggle',
     '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',