bug(Datepicker): no datepicker icon shown

[nivekcode]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hey there, currently when I build a Angular 21 app with the latest material (21.0.2) and use the datepicker as shown in the material examples theres no icon displayed.

<mat-form-field appearance="outline" class="ef-field">
            <mat-label>Start date</mat-label>
            <input matInput [matDatepicker]="startPicker" />
            <mat-datepicker #startPicker></mat-datepicker>
 </mat-form-field>

Reproduction

1. Check out this project: https://github.com/nivekcode/broken-datepicker
2. npm i
3. npm run start

Expected Behavior

Icon and datepicker should be shown

Actual Behavior

no icon and no datepicker are shown

Environment

• Angular: 21.0.0
• CDK/Material: 21.0.2
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[crisbeto]

The datepicker icon comes from the mat-datepicker-toggle component:

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> <!-- This -->
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

[nivekcode]

Hey @crisbeto thx for the reply. I added this but the icon is still not shown. You can reproduce this in the repo I shared.

[crisbeto]

Your example doesn't work, because you haven't imported the MatSuffix directive.

[nivekcode]

thy @crisbeto that works 👍 , I think it would be great to add this as welll in the example code in the docs: https://material.angular.dev/components/datepicker/overview