Skip to content

Commit

Permalink
add custom icon toggles to the demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmalerba
mmalerba committed Sep 26, 2022
1 parent 42d65cd commit 610465a
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 0 deletions.
30 changes: 30 additions & 0 deletions src/dev-app/datepicker/datepicker-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,3 +302,33 @@ <h2>Range picker with custom selection strategy</h2>
</mat-date-range-picker>
</mat-form-field>
</div>

<h2>With custom icon</h2>
<p>
<mat-form-field appearance="fill">
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci1">
<mat-datepicker-toggle matSuffix [for]="ci1">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #ci1></mat-datepicker>
</mat-form-field>
<br>
<mat-form-field appearance="outline">
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci2">
<mat-datepicker-toggle matSuffix [for]="ci2">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #ci2></mat-datepicker>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci3">
<mat-datepicker #ci3></mat-datepicker>
</mat-form-field>
<mat-datepicker-toggle matSuffix [for]="ci3">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
</p>
48 changes: 48 additions & 0 deletions src/dev-app/legacy-datepicker/datepicker-demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,3 +302,51 @@ <h2>Range picker with custom selection strategy</h2>
</mat-date-range-picker>
</mat-form-field>
</div>

<h2>With custom icon</h2>
<p>
<mat-form-field appearance="fill">
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci1">
<mat-datepicker-toggle matSuffix [for]="ci1">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #ci1></mat-datepicker>
</mat-form-field>
<br>
<mat-form-field appearance="outline">
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci2">
<mat-datepicker-toggle matSuffix [for]="ci2">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #ci2></mat-datepicker>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci3">
<mat-datepicker #ci3></mat-datepicker>
</mat-form-field>
<mat-datepicker-toggle matSuffix [for]="ci3">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
<br>
<mat-form-field appearance="legacy">
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci4">
<mat-datepicker-toggle matSuffix [for]="ci4">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #ci4></mat-datepicker>
</mat-form-field>
<br>
<mat-form-field appearance="standard">
<mat-label>Custom icon</mat-label>
<input matInput [matDatepicker]="ci5">
<mat-datepicker-toggle matSuffix [for]="ci5">
<mat-icon matDatepickerToggleIcon>add</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #ci5></mat-datepicker>
</mat-form-field>
</p>

0 comments on commit 610465a

Please sign in to comment.