能否将Kendo Angular Date Picker默认图标替换为Font Awesome图标？

替换默认图标 #

Kendo DatePicker的日历切换按钮默认使用内置日历图标，若要替换为自定义图标，可通过模板重写实现：

• 使用第三方图标库（如Font Awesome）：

  <kendo-datepicker>
      <ng-template kendoDatePickerToggleButtonTemplate>
          <span class="fa fa-calendar-check-o"></span>
      </ng-template>
  </kendo-datepicker>
  

• 使用Kendo官方图标库：

  <kendo-datepicker>
      <ng-template kendoDatePickerToggleButtonTemplate>
          <kendo-icon name="calendar-date" [svg]="true"></kendo-icon>
      </ng-template>
  </kendo-datepicker>
  

调整默认图标样式 #

无需替换图标，仅修改颜色、大小等样式时，直接通过CSS覆盖：

/* 修改图标颜色 */
.k-datepicker .k-icon.k-i-calendar {
    color: #1976d2;
}

/* 调整图标尺寸 */
.k-datepicker .k-icon.k-i-calendar {
    font-size: 20px;
    line-height: 1.5;
}

隐藏图标或按钮 #

• 仅隐藏图标（保留按钮占位）：

  .k-datepicker .k-icon.k-i-calendar {
      display: none;
  }
  

• 隐藏整个日历切换按钮：

  .k-datepicker .k-select {
      display: none;
  }
  

内容的提问来源于stack exchange，提问作者Thambu Asirvatham