更改角度材质 datePicker 图标答案

【问题标题】：change angular material datePicker icon更改角度材质 datePicker 图标
【发布时间】：2017-12-23 07:57:38
【问题描述】：

我想知道是否可以使用角度材料的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>

有没有办法做到这一点？

【问题讨论】：

标签： angular datepicker angular-material2

【解决方案1】：

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

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

【讨论】：

已经有一个运行良好的解决方案，请查看接受的答案。
如果您更喜欢解决方法没问题，这只是另一种解决方案。 matDatepickerToggleIcon 是一种来自材料的方法。 material.angular.io/components/datepicker/api
这个解决方案比公认的要好得多，尤其是因为 >>> hack 已被弃用。
这是否适用于不在素材中的图标？如何从 src/assets 插入图标？

【解决方案2】：

您可以通过覆盖mat-datepicker-toggle 类的background 属性来实现。从asset 文件夹中添加所需图标的路径。

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

>>> .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>

【讨论】：

【解决方案3】：

你可以在里面添加自己的图片

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

【讨论】：

【解决方案4】：

您可以像这样使用 svg 作为自定义图标：

<mat-form-field style="width: 100%; margin-top: 16px;">
    <mat-label style="font-size: 16px;">Date</mat-label>
    <input matInput [matDatepicker]="protocolIssueDate" formControlName="protocolIssueDate">
    <mat-datepicker-toggle matSuffix [for]="protocolIssueDate">
        <mat-icon matDatepickerToggleIcon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 4L9 4V6L15 6V4L17 4V6L20 6V14H18V8L6 8L6 18H14V20H4L4 6H7V4Z" fill="black" fill-opacity="0.38"/>
                <path d="M10 12V10H8V12H10Z" fill="black" fill-opacity="0.38"/>
                <path d="M14 10L12 10V12L14 12V10Z" fill="black" fill-opacity="0.38"/>
                <path d="M10 16V14L8 14V16L10 16Z" fill="black" fill-opacity="0.38"/>
            </svg>
        </mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #protocolIssueDate startView="month" [startAt]="startProtocolIssueDate"></mat-datepicker>
</mat-form-field>

【讨论】：