如何使用Angular5材料在datepicker中替换图标

Question

我已经使用angular5定义了 datePicker，但是我需要在 <mat-datepicker-toggle>

中替换图标

查看文档(https://material.angular.io/components/datepicker/overview(似乎应该使用指令matDatepickerToggleIcon足够。

我拥有的代码如下：

<mat-form-field class="example-full-width">
    <input matInput 
        [(ngModel)]="varDateFrom" 
        [matDatepicker]="DatepickerFrom"                    
        placeholder="Date From"
        name="DateFrom">                                
     <mat-datepicker-toggle matSuffix [for]="DatepickerFrom">
        <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
     </mat-datepicker-toggle>                   
     <mat-datepicker #DatepickerFrom></mat-datepicker></mat-form-field>

任何想法为什么指令不起作用？

非常感谢。最好的问候。

Answer 1

您可以尝试这种方式，删除mat-datepicker-toggle并添加外部图标：

<mat-form-field class="example-full-width">
  <input matInput 
    [(ngModel)]="varDateFrom" 
    [matDatepicker]="DatepickerFrom"                    
    placeholder="Date From"
    name="DateFrom">                                
  <mat-datepicker #DatepickerFrom></mat-datepicker>
  <i class="fas fa-calendar-alt" (click)="picker.open()"></i>
</mat-form-field>