更改角度材料datePicker图标

Question

我想知道是否可以使用角度材料的datePicker更改显示的图标.

这是角度材料文档中的代码.

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

有没有办法实现这一目标？

Answer 1

您可以在mat-datepicker-toggle中添加mat-icon自定义

<input matInput [matDatepicker]="dp" placeholder="Select minimum date" disabled>
<mat-datepicker-toggle matSuffix [for]="dp">
  <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #dp disabled="false"></mat-datepicker>

Answer 2

background您可以通过覆盖类的属性来做到这一点mat-datepicker-toggle。添加文件夹中所需图标的路径asset。

calender以下是将icon替换alert.png为 中的 icon的示例src > asset > img：

>>> .mat-datepicker-toggle {
    background: url("../../assets/img/alert-circle-24.png") no-repeat !important;
}

html:

<md-input-container align="end">
   <input mdInput [mdDatepicker]="datepicker"
                  [(ngModel)]="date">
   <button mdSuffix [mdDatepickerToggle]="datepicker"></button>
</md-input-container>

Answer 3

您可以在其中添加自己的图像

<mat-datepicker-toggle matSuffix (click)="openCalendar()">
    <mat-icon matDatepickerToggleIcon>
        <img src={{imageSource}}>
    </mat-icon>
</mat-datepicker-toggle>