ändern Sie eckiges Material datePicker Symbol

Question

Ich frage mich, ob es möglich ist, das angezeigte Symbol mit dem datePicker von eckigem Material zu ändern.

Dies ist der Code aus den eckigen Materialdokumenten.

<md-input-container> 
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> 
    <button mdSuffix [mdDatepickerToggle]="picker"></button> 
</md-input-container> 
<md-datepicker #picker></md-datepicker> 

Gibt es eine Möglichkeit, das zu erreichen?

Answer 1

Sie können dies tun, indem Sie die background Eigenschaft der mat-datepicker-toggle Klasse überschreiben. Fügen Sie den Pfad eines gewünschten Symbols aus Ihrem Ordner asset hinzu.

Hier ist ein Beispiel calender Symbol mit einem alert.png Symbol in src > asset > img ersetzen:

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

Sie eine Matte-Ikone in Matte- hinzufügen datepicker-toggle

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