how to customize angular material design mat-datepicker icon size

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.

Continue reading...