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

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.

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.

@Cuzy I found out that some internal libraries were interfering with mat-datepicker styling, as in angular material 15 many guidelines are changed. Removed those libraries

Tried overriding style classes

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.mat-calendar-body-cell {
  .mat-calendar-body-selected {
    padding-left: 10px;
    padding-right: 0;
  }
}

<!-- end snippet -->

This has helped but not entirely, after clicking on dates now it's coming in the center because of the extra padding I have added.

But when clicking disabled dates it comes towards the right. And disabled dates shift towards the left.

@Tony yes we are overriding styles related to color, But not related to calendar-cell-content.

Hi this is resolved as per this StackOverflow link you can look for this

https://stackoverflow.com/questions/63307202/angular-material-10-date-picker-mat-datepicker-does-not-align-with-others-inpu

.mat-calendar-body-cell:focus .mat-focus-indicator::before{content:normal !important;}