I wonder if it is possible to change the icon displayed using the datePicker of angular material.
This is the code from the angular material docs.
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
Is there a way to achieve that?
You can add your own image within
<mat-datepicker-toggle matSuffix (click)="openCalendar()">
<mat-icon matDatepickerToggleIcon>
<img src={{imageSource}}>
</mat-icon>
</mat-datepicker-toggle>
You can use svg for custom icon like this:
<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>
Check this https://stackblitz.com/edit/angular-ivy-xc5wkd?file=src%2Fapp%2Fapp.component.ts
Custom Icon Outside of Material icons fonts, this approach will be more reusable and clear to the developer.
<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>
Result:
Angular 13