fix(datepicker): refactor toggle to fix theming and allow it to be

combined with button directives

src/demo-app/datepicker/datepicker-demo.html

@@ -7,27 +7,35 @@ <h2>Options</h2>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="minDatePicker" [(ngModel)]="minDate" placeholder="Min date">
-    <button mdSuffix [mdDatepickerToggle]="minDatePicker"></button>
+    <button md-icon-button mdSuffix [mdDatepickerToggle]="minDatePicker">
+      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+    </button>
   </md-input-container>
   <md-datepicker #minDatePicker [touchUi]="touch"></md-datepicker>
   <md-input-container>
     <input mdInput [mdDatepicker]="maxDatePicker" [(ngModel)]="maxDate" placeholder="Max date">
-    <button mdSuffix [mdDatepickerToggle]="maxDatePicker"></button>
+    <button md-icon-button mdSuffix [mdDatepickerToggle]="maxDatePicker">
+      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+    </button>
   </md-input-container>
   <md-datepicker #maxDatePicker [touchUi]="touch"></md-datepicker>
 </p>
 <p>
   <md-input-container>
     <input mdInput [mdDatepicker]="startAtPicker" [(ngModel)]="startAt" placeholder="Start at date">
-    <button mdSuffix [mdDatepickerToggle]="startAtPicker"></button>
+    <button md-icon-button mdSuffix [mdDatepickerToggle]="startAtPicker">
+      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+    </button>
   </md-input-container>
   <md-datepicker #startAtPicker [touchUi]="touch"></md-datepicker>
 </p>
 
 <h2>Result</h2>
 
 <p>
-  <button [mdDatepickerToggle]="resultPicker"></button>
+  <button md-icon-button [mdDatepickerToggle]="resultPicker">
+    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+  </button>
   <md-input-container>
     <input mdInput
            #resultPickerModel="ngModel"
@@ -55,7 +63,9 @@ <h2>Result</h2>
          [max]="maxDate"
          [mdDatepickerFilter]="filterOdd ? dateFilter : null"
          placeholder="Pick a date">
-  <button [mdDatepickerToggle]="resultPicker2"></button>
+  <button md-icon-button [mdDatepickerToggle]="resultPicker2">
+    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+  </button>
   <md-datepicker
       #resultPicker2
       [touchUi]="touch"

src/lib/datepicker/datepicker-toggle.html

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100%" height="100%"
+     fill="currentColor" style="vertical-align: top">
+  <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>

src/lib/datepicker/datepicker-toggle.scss

@@ -1,18 +1,8 @@
+// The width/height of the icon element.
 $mat-datepicker-toggle-icon-size: 24px !default;
 
-
-.mat-datepicker-toggle {
+.mat-datepicker-toggle-icon {
   display: inline-block;
-  // Note: SVG needs to be base64 encoded or it will not work on IE11.
-  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE5IDNoLTFWMWgtMnYySDhWMUg2djJINWMtMS4xMSAwLTEuOTkuOS0xLjk5IDJMMyAxOWMwIDEuMS44OSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE2SDVWOGgxNHYxMXpNNyAxMGg1djVIN3oiLz48L3N2Zz4=') no-repeat;
-  background-size: contain;
   height: $mat-datepicker-toggle-icon-size;
   width: $mat-datepicker-toggle-icon-size;
-  border: none;
-  outline: none;
-  vertical-align: middle;
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
 }

src/lib/datepicker/datepicker-toggle.ts

@@ -6,24 +6,25 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  ElementRef,
+  Input,
+  ViewEncapsulation
+} from '@angular/core';
 import {MdDatepicker} from './datepicker';
 import {MdDatepickerIntl} from './datepicker-intl';
 
 
-@Component({
-  moduleId: module.id,
-  selector: 'button[mdDatepickerToggle], button[matDatepickerToggle]',
-  template: '',
-  styleUrls: ['datepicker-toggle.css'],
+@Directive({
+  selector: '[mdDatepickerToggle], [matDatepickerToggle]',
   host: {
-    'type': 'button',
-    'class': 'mat-datepicker-toggle',
+    '[type]': '_isButton ? "button" : undefined',
     '[attr.aria-label]': '_intl.openCalendarLabel',
     '(click)': '_open($event)',
   },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdDatepickerToggle<D> {
   /** Datepicker instance that the button will toggle. */
@@ -33,7 +34,12 @@ export class MdDatepickerToggle<D> {
   get _datepicker() { return this.datepicker; }
   set _datepicker(v: MdDatepicker<D>) { this.datepicker = v; }
 
-  constructor(public _intl: MdDatepickerIntl) {}
+  /** Whether the host element is an HTML button. */
+  _isButton = false;
+
+  constructor(elementRef: ElementRef, public _intl: MdDatepickerIntl) {
+    this._isButton = elementRef.nativeElement.tagName.toLowerCase() === 'button';
+  }
 
   _open(event: Event): void {
     if (this.datepicker) {
@@ -42,3 +48,17 @@ export class MdDatepickerToggle<D> {
     }
   }
 }
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-datepicker-toggle-icon, mat-datepicker-toggle-icon',
+  templateUrl: 'datepicker-toggle.html',
+  styleUrls: ['datepicker-toggle.css'],
+  host: {
+    'class': 'mat-datepicker-toggle-icon',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MdDatepickerToggleIcon {}

src/lib/datepicker/index.ts

@@ -9,14 +9,14 @@
 import {NgModule} from '@angular/core';
 import {MdMonthView} from './month-view';
 import {CommonModule} from '@angular/common';
-import {StyleModule, OverlayModule, A11yModule} from '../core';
+import {A11yModule, OverlayModule, StyleModule} from '../core';
 import {MdCalendarBody} from './calendar-body';
 import {MdYearView} from './year-view';
 import {MdDatepicker, MdDatepickerContent} from './datepicker';
 import {MdDatepickerInput} from './datepicker-input';
 import {MdDialogModule} from '../dialog/index';
 import {MdCalendar} from './calendar';
-import {MdDatepickerToggle} from './datepicker-toggle';
+import {MdDatepickerToggle, MdDatepickerToggleIcon} from './datepicker-toggle';
 import {MdButtonModule} from '../button/index';
 import {MdDatepickerIntl} from './datepicker-intl';
 
@@ -45,6 +45,7 @@ export * from './year-view';
     MdDatepickerContent,
     MdDatepickerInput,
     MdDatepickerToggle,
+    MdDatepickerToggleIcon,
   ],
   declarations: [
     MdCalendar,
@@ -53,6 +54,7 @@ export * from './year-view';
     MdDatepickerContent,
     MdDatepickerInput,
     MdDatepickerToggle,
+    MdDatepickerToggleIcon,
     MdMonthView,
     MdYearView,
   ],

src/lib/input/_input-theme.scss

@@ -151,17 +151,20 @@
   .mat-input-suffix {
     // Allow icons in a prefix or suffix to adapt to the correct size.
     .mat-icon,
-    .mat-datepicker-toggle {
+    .mat-datepicker-toggle-icon {
       font-size: $prefix-suffix-icon-font-size;
+      line-height: $line-height;
     }
 
     // Allow icon buttons in a prefix or suffix to adapt to the correct size.
     .mat-icon-button {
       height: $prefix-suffix-icon-font-scale * 1em;
       width: $prefix-suffix-icon-font-scale * 1em;
 
-      .mat-icon {
-        line-height: $prefix-suffix-icon-font-scale;
+      .mat-icon,
+      .mat-datepicker-toggle-icon {
+        height: $line-height * 1em;
+        line-height: $line-height;
       }
     }
   }

src/lib/input/input-container.scss

@@ -42,22 +42,18 @@ $mat-input-underline-height: 1px !default;
 
   // Allow icons in a prefix or suffix to adapt to the correct size.
   .mat-icon,
-  .mat-datepicker-toggle {
+  .mat-datepicker-toggle-icon {
     width: 1em;
-    height: 1em;
-    vertical-align: text-bottom;
   }
 
   // Allow icon buttons in a prefix or suffix to adapt to the correct size.
   .mat-icon-button {
     font: inherit;
     vertical-align: baseline;
 
-    .mat-icon {
+    .mat-icon,
+    .mat-datepicker-toggle-icon {
       font-size: inherit;
-      width: 1em;
-      height: 1em;
-      vertical-align: baseline;
     }
   }
 }
@@ -235,7 +231,7 @@ textarea.mat-input-element {
 .mat-input-subscript-wrapper,
 .mat-input-placeholder-wrapper {
   .mat-icon,
-  .mat-datepicker-toggle {
+  .mat-datepicker-toggle-icon {
     width: 1em;
     height: 1em;
     font-size: inherit;