Click here to see the appearance Angular Material date picker is acting weirdly, when selected on the icon the calendar appears to be very big. Is any else facing this issue.

app.component.html:

<mat-form-field appearance="fill">
   <input matInput [matDatepicker]="myDatePicker">
   <mat-datepicker-toggle matSuffix [for]="myDatePicker"></mat-datepicker-toggle>
   <mat-datepicker #myDatePicker></mat-datepicker>
</mat-form-field>

app.model.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {CommonModule} from '@angular/common';
import {FormsModule}    from '@angular/forms';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';
import {MatInputModule} from '@angular/material/input'

// import { MatMomentDateModule } from "@angular/material/moment-adapter";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CommonModule,
    FormsModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatFormFieldModule,
  MatNativeDateModule,
MatInputModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }