Angular material datepicker does't arrange items on a single row

Issue

In my web application I’m using an angular material datepicker.
The issue is that it does not show all the elements in a row.
This is my view:

Datepicker

To avoid that my customized css has an impact on the view I removed every customized style.

This way, my html is very simple. I simply copied and pasted the angular material example from angular official portal (basic datepicker item):

<mat-form-field appearance="fill">
  <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>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

But according to the angular material exaple on-line the image should be something like this:
Basi datepicker from angular material online help

In what am I wrong?

Solution

Try using matSuffix instead of matIconSuffix in your mat-datepicker-toggle.

Edit following @TotallyNewb’s comment.

Angular version <= v14: matSuffix

Angular version >= v15: matIconSuffix

Answered By – Nico

Answer Checked By – Marilyn (AngularFixing Volunteer)