how to customize angular material design mat-datepicker icon size

Question

I would like to make the icon of the material mat-datepicker so it fits inside my div without any margins or padding around it. My code is:

<div class="container">

    <input [matDatepicker]="datePicker1" type="hidden" class="dp">
    <mat-datepicker #picker class="dp"></mat-datepicker>
    <mat-datepicker-toggle  class="dp" [for]="datePicker1"></mat-datepicker-toggle>

</div>

SCSS

.container{
    border-width: 1px;
    border-style: solid;
    border-color: silver;
}
::ng-deep .dp {
    padding: 0;
    margin: 0;
    font-size: 10px;

    border-width: 1px;
    border-style: solid;
    border-color: red;

    height: 12px;
    width: 12x;
    line-height: 12px;
    min-height: 12px;
}

I would like to see the red border around the icon touch the gray border of the div on the bottom and on the top ( or all around). Please advise how to access the proper properties to achieve this.

Answer 1

Finally I found 2 sollution:

Create a css class (name is important to override the default css):

.mat-mdc-icon-button {
   transform: scale(0.7);
}

Use it directly on the component:

<mat-datetimepicker-toggle class="mat-mdc-icon-button"></mat-datetimepicker-toggle>

Or create the css class directly in the styles.scss file of the project to apply on all components