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.).

Author: crisbeto

src/lib/datepicker/BUILD.bazel

@@ -9,14 +9,14 @@ ng_module(
   module_name = "@angular/material/datepicker",
   assets = [
     ":datepicker_content_css",
+    ":datepicker_toggle_css",
     ":calendar_body_css",
     ":calendar_css",
   ],
   deps = [
     "//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(

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,
   ],

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>

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;
+  }
+}

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',