update usages of datepicker toggle

angular · Jun 29, 2017 · 33c85c8 · 33c85c8
1 parent b924d0f
commit 33c85c8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md
@@ -25,7 +25,9 @@ An optional datepicker toggle button is available. A toggle can be added to the
 
 ```html
 <input [mdDatepicker]="myDatepicker">
-<button [mdDatepickerToggle]="myDatepicker"></button>
+<button md-icon-button [mdDatepickerToggle]="myDatepicker">
+  <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+</button>
 <md-datepicker #myDatepicker></md-datepicker>
 ```
 
@@ -35,7 +37,9 @@ can easily be used as a prefix or suffix on the material input:
 ```html
 <md-input-container>
   <input mdInput [mdDatepicker]="myDatepicker">
-  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
+  <button md-icon-button mdSuffix [mdDatepickerToggle]="myDatepicker">
+    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+  </button>
 </md-input-container>
 <md-datepicker #myDatepicker></md-datepicker>
 ```

diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
@@ -812,7 +812,9 @@ class DatepickerWithFormControl {
 @Component({
   template: `
     <input [mdDatepicker]="d">
-    <button [mdDatepickerToggle]="d"></button>
+    <button [mdDatepickerToggle]="d">
+      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+    </button>
     <md-datepicker #d [touchUi]="touchUI"></md-datepicker>
   `,
 })
@@ -839,7 +841,9 @@ class InputContainerDatepicker {
 @Component({
   template: `
     <input [mdDatepicker]="d" [(ngModel)]="date" [min]="minDate" [max]="maxDate">
-    <button [mdDatepickerToggle]="d"></button>
+    <button [mdDatepickerToggle]="d">
+      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+    </button>
     <md-datepicker #d></md-datepicker>
   `,
 })
@@ -854,7 +858,9 @@ class DatepickerWithMinAndMaxValidation {
 @Component({
   template: `
     <input [mdDatepicker]="d" [(ngModel)]="date" [mdDatepickerFilter]="filter">
-    <button [mdDatepickerToggle]="d"></button>
+    <button [mdDatepickerToggle]="d">
+      <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+    </button>
     <md-datepicker #d [touchUi]="true"></md-datepicker>
   `,
 })

diff --git a/src/material-examples/datepicker-overview/datepicker-overview-example.html b/src/material-examples/datepicker-overview/datepicker-overview-example.html
@@ -1,5 +1,7 @@
 <md-input-container>
   <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
-  <button mdSuffix [mdDatepickerToggle]="picker"></button>
+  <button md-icon-button mdSuffix [mdDatepickerToggle]="picker">
+    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+  </button>
 </md-input-container>
 <md-datepicker #picker></md-datepicker>
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -87,7 +87,9 @@ <h2>Datepicker</h2>
 
 <md-input-container>
   <input type="text" mdInput [mdDatepicker]="birthday" placeholder="Birthday">
-  <button mdSuffix [mdDatepickerToggle]="birthday"></button>
+  <button md-icon-button mdSuffix [mdDatepickerToggle]="birthday">
+    <md-datepicker-toggle-icon></md-datepicker-toggle-icon>
+  </button>
   <md-datepicker #birthday></md-datepicker>
 </md-input-container>