更改 angular material datePicker 图标
change angular material datePicker icon
我想知道是否可以更改使用 angular material 的 datePicker 显示的图标。
这是 angular material 文档中的代码。
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
有办法实现吗?
您可以通过覆盖 mat-datepicker-toggle
class 的 background
属性 来实现。从 asset
文件夹中添加所需图标的路径。
下面是在 src > asset > img
中用 alert.png
图标替换 calender
图标的示例:
>>> .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>
您可以在 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>
您可以在
内添加自己的图片
<mat-datepicker-toggle matSuffix (click)="openCalendar()">
<mat-icon matDatepickerToggleIcon>
<img src={{imageSource}}>
</mat-icon>
</mat-datepicker-toggle>
您可以像这样使用 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>
我想知道是否可以更改使用 angular material 的 datePicker 显示的图标。
这是 angular material 文档中的代码。
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
有办法实现吗?
您可以通过覆盖 mat-datepicker-toggle
class 的 background
属性 来实现。从 asset
文件夹中添加所需图标的路径。
下面是在 src > asset > img
中用 alert.png
图标替换 calender
图标的示例:
>>> .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>
您可以在 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>
您可以在
内添加自己的图片<mat-datepicker-toggle matSuffix (click)="openCalendar()">
<mat-icon matDatepickerToggleIcon>
<img src={{imageSource}}>
</mat-icon>
</mat-datepicker-toggle>
您可以像这样使用 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>