Angular 15 <mat-datepicker> cell-content alignment issue

Question

Scenario: I have upgraded a project from angular 12 to 15, angular material has been upgraded to 15.2.6. No external css is added for date-picker.

When opening the calendear, the date selected is aligned towards left.

As soon as the focus is changed(clicked anywhere else in the calendar window). alignment is corrected.

This is bare metal mat-datepicker, nothing extra is added.

I created a another project and there mat-datepicker is working perfectly fine. I tried to overide scss of mat-datepicker but found no success, with this alignment issue. If somebody faced this issue please help.

Answer 1

I had the same issue once i migrated to Angular 14 to 15.

There seems to be a weird margin-right applied to icons, i had to remove theme manualy in global styles; with:

.mat-mdc-button>.mat-icon, .mat-mdc-raised-button>.mat-icon, .mat-mdc-flat-button>.mat-icon {
  margin-right: 0!important;
}

I should point out that this problem does not occur on newly created projects through angular cli.