fix(material/datepicker): Add a custom icon template for the calendar…

src/dev-app/datepicker/datepicker-demo.ts

@@ -151,10 +151,15 @@ export class CustomHeader<D> implements OnDestroy {
   template: `
       <mat-calendar-header #header>
         <button mat-button type="button" (click)="todayClicked()">TODAY</button>
+        <ng-template periodButtonIcon let-invert>
+          <mat-icon
+            [inline]="true" class="mat-calendar-arrow"
+            [class.mat-calendar-invert]="invert">arrow_drop_down</mat-icon>
+        </ng-template>
       </mat-calendar-header>
     `,
   standalone: true,
-  imports: [MatDatepickerModule],
+  imports: [MatDatepickerModule, MatIconModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomHeaderNgContent<D> {

src/material/datepicker/calendar-header.html

@@ -8,10 +8,16 @@
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
             [attr.aria-describedby]="_periodButtonLabelId">
       <span aria-hidden="true">{{periodButtonText}}</span>
-      <svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
-           viewBox="0 0 10 5" focusable="false" aria-hidden="true">
-           <polygon points="0,0 5,5 10,0"/>
-      </svg>
+      @if(!_customPeriodButtonIcon) {
+        <svg class="mat-calendar-arrow" [class.mat-calendar-invert]="calendar.currentView !== 'month'"
+              viewBox="0 0 10 5" focusable="false" aria-hidden="true">
+              <polygon points="0,0 5,5 10,0"/>
+        </svg>
+      } @else {
+        <ng-container 
+        *ngTemplateOutlet="_customPeriodButtonIcon.templateRef; context: {$implicit: calendar.currentView !== 'month'}"></ng-container>
+      }
+
     </button>
 
     <div class="mat-calendar-spacer"></div>

src/material/datepicker/calendar.ts

@@ -13,6 +13,8 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ContentChild,
+  Directive,
   EventEmitter,
   forwardRef,
   Inject,
@@ -23,6 +25,7 @@ import {
   Output,
   SimpleChange,
   SimpleChanges,
+  TemplateRef,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -42,6 +45,7 @@ import {MatYearView} from './year-view';
 import {MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from './date-selection-model';
 import {MatIconButton, MatButton} from '@angular/material/button';
 import {CdkMonitorFocus} from '@angular/cdk/a11y';
+import {CommonModule} from '@angular/common';
 
 let calendarHeaderId = 1;
 
@@ -51,6 +55,14 @@ let calendarHeaderId = 1;
  */
 export type MatCalendarView = 'month' | 'year' | 'multi-year';
 
+@Directive({
+  selector: '[periodButtonIcon]',
+  standalone: true,
+})
+export class MatCalendarHeaderPeriodButtonIcon {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+
 /** Default header for MatCalendar */
 @Component({
   selector: 'mat-calendar-header',
@@ -59,9 +71,11 @@ export type MatCalendarView = 'month' | 'year' | 'multi-year';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatButton, MatIconButton],
+  imports: [MatButton, MatIconButton, CommonModule],
 })
 export class MatCalendarHeader<D> {
+  @ContentChild(MatCalendarHeaderPeriodButtonIcon)
+  _customPeriodButtonIcon: MatCalendarHeaderPeriodButtonIcon;
   constructor(
     private _intl: MatDatepickerIntl,
     @Inject(forwardRef(() => MatCalendar)) public calendar: MatCalendar<D>,

src/material/datepicker/datepicker-module.ts

@@ -14,7 +14,7 @@ import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {CdkScrollableModule} from '@angular/cdk/scrolling';
 import {MatCommonModule} from '@angular/material/core';
-import {MatCalendar, MatCalendarHeader} from './calendar';
+import {MatCalendar, MatCalendarHeader, MatCalendarHeaderPeriodButtonIcon} from './calendar';
 import {MatCalendarBody} from './calendar-body';
 import {MatDatepicker} from './datepicker';
 import {
@@ -51,6 +51,7 @@ import {MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel} from './d
     MatYearView,
     MatMultiYearView,
     MatCalendarHeader,
+    MatCalendarHeaderPeriodButtonIcon,
     MatDateRangeInput,
     MatStartDate,
     MatEndDate,
@@ -72,6 +73,7 @@ import {MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel} from './d
     MatYearView,
     MatMultiYearView,
     MatCalendarHeader,
+    MatCalendarHeaderPeriodButtonIcon,
     MatDateRangeInput,
     MatStartDate,
     MatEndDate,

tools/public_api_guard/material/datepicker.md

@@ -292,6 +292,8 @@ export class MatCalendarHeader<D> {
     // (undocumented)
     calendar: MatCalendar<D>;
     currentPeriodClicked(): void;
+    // (undocumented)
+    _customPeriodButtonIcon: MatCalendarHeaderPeriodButtonIcon;
     get nextButtonLabel(): string;
     nextClicked(): void;
     nextEnabled(): boolean;
@@ -304,11 +306,22 @@ export class MatCalendarHeader<D> {
     previousClicked(): void;
     previousEnabled(): boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarHeader<any>, "mat-calendar-header", ["matCalendarHeader"], {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatCalendarHeader<any>, "mat-calendar-header", ["matCalendarHeader"], {}, {}, ["_customPeriodButtonIcon"], ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarHeader<any>, [null, null, { optional: true; }, { optional: true; }, null]>;
 }
 
+// @public (undocumented)
+export class MatCalendarHeaderPeriodButtonIcon {
+    constructor(templateRef: TemplateRef<any>);
+    // (undocumented)
+    templateRef: TemplateRef<any>;
+    // (undocumented)
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatCalendarHeaderPeriodButtonIcon, "[periodButtonIcon]", never, {}, {}, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatCalendarHeaderPeriodButtonIcon, never>;
+}
+
 // @public
 export interface MatCalendarUserEvent<D> {
     // (undocumented)
@@ -516,7 +529,7 @@ export class MatDatepickerModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatDatepickerModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDatepickerModule, never, [typeof i1.CommonModule, typeof i2.MatButtonModule, typeof i3.OverlayModule, typeof i4.A11yModule, typeof i5.PortalModule, typeof i6.MatCommonModule, typeof i7.MatCalendar, typeof i8.MatCalendarBody, typeof i9.MatDatepicker, typeof i10.MatDatepickerContent, typeof i11.MatDatepickerInput, typeof i12.MatDatepickerToggle, typeof i12.MatDatepickerToggleIcon, typeof i13.MatMonthView, typeof i14.MatYearView, typeof i15.MatMultiYearView, typeof i7.MatCalendarHeader, typeof i16.MatDateRangeInput, typeof i17.MatStartDate, typeof i17.MatEndDate, typeof i18.MatDateRangePicker, typeof i19.MatDatepickerActions, typeof i19.MatDatepickerCancel, typeof i19.MatDatepickerApply], [typeof i20.CdkScrollableModule, typeof i7.MatCalendar, typeof i8.MatCalendarBody, typeof i9.MatDatepicker, typeof i10.MatDatepickerContent, typeof i11.MatDatepickerInput, typeof i12.MatDatepickerToggle, typeof i12.MatDatepickerToggleIcon, typeof i13.MatMonthView, typeof i14.MatYearView, typeof i15.MatMultiYearView, typeof i7.MatCalendarHeader, typeof i16.MatDateRangeInput, typeof i17.MatStartDate, typeof i17.MatEndDate, typeof i18.MatDateRangePicker, typeof i19.MatDatepickerActions, typeof i19.MatDatepickerCancel, typeof i19.MatDatepickerApply]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatDatepickerModule, never, [typeof i1.CommonModule, typeof i2.MatButtonModule, typeof i3.OverlayModule, typeof i4.A11yModule, typeof i5.PortalModule, typeof i6.MatCommonModule, typeof i7.MatCalendar, typeof i8.MatCalendarBody, typeof i9.MatDatepicker, typeof i10.MatDatepickerContent, typeof i11.MatDatepickerInput, typeof i12.MatDatepickerToggle, typeof i12.MatDatepickerToggleIcon, typeof i13.MatMonthView, typeof i14.MatYearView, typeof i15.MatMultiYearView, typeof i7.MatCalendarHeader, typeof i7.MatCalendarHeaderPeriodButtonIcon, typeof i16.MatDateRangeInput, typeof i17.MatStartDate, typeof i17.MatEndDate, typeof i18.MatDateRangePicker, typeof i19.MatDatepickerActions, typeof i19.MatDatepickerCancel, typeof i19.MatDatepickerApply], [typeof i20.CdkScrollableModule, typeof i7.MatCalendar, typeof i8.MatCalendarBody, typeof i9.MatDatepicker, typeof i10.MatDatepickerContent, typeof i11.MatDatepickerInput, typeof i12.MatDatepickerToggle, typeof i12.MatDatepickerToggleIcon, typeof i13.MatMonthView, typeof i14.MatYearView, typeof i15.MatMultiYearView, typeof i7.MatCalendarHeader, typeof i7.MatCalendarHeaderPeriodButtonIcon, typeof i16.MatDateRangeInput, typeof i17.MatStartDate, typeof i17.MatEndDate, typeof i18.MatDateRangePicker, typeof i19.MatDatepickerActions, typeof i19.MatDatepickerCancel, typeof i19.MatDatepickerApply]>;
 }
 
 // @public