更改角度材质datePicker图标

Question

我想知道是否可以更改使用 Angular Material 的 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>arrow_drop_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #dp disabled="false"></mat-datepicker>

Answer 2

您可以通过覆盖

background

类的

mat-datepicker-toggle

属性来做到这一点。添加您想要的

asset

文件夹中的图标路径。

以下是在

calender

中将

alert.png

图标替换为

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>

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

Answer 5

检查这个https://stackblitz.com/edit/angular-ivy-xc5wkd?file=src%2Fapp%2Fapp.component.ts

在 Material 图标字体之外自定义图标，这种方法对于开发人员来说将更加可重用且清晰。

<mat-form-field class="custom-mat-form-field" appearance="fill">
<mat-label>Choose a date 1</mat-label>
<input matInput [matDatepicker]="picker1" />
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="picker1">

  <!-- this icon is outside of Material icons font -->
  <mat-icon svgIcon="date_check_in" matDatepickerToggleIcon></mat-icon>
  <!-- you can check how do this in the link above -->
  
</mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>

结果：

角度13

Answer 6

matDatepickerToggleIcon 解决方案对我不起作用，因为我想要一个自定义图标。我必须使用 CSS：

.mat-datetimepicker-toggle, .mat-datepicker-toggle {
    .mat-icon {
        background-image: url('../../assets/images/calendar.svg');
        background-position: 5px 2px;
        background-repeat: no-repeat;

        svg {
            display: none;
        }
    }
}