Placeholder left margin/padding on Angular Material datepicker?

Question

It's easy to set a left margin/padding on the Angular Material Datepicker value just adding padding-left: xx on the input's css:

But is it possible to add left margin to the datepicker's placeholder?

I would like to have a bigger margin so that the validation symbol does not hide the placeholder's text:

Answer 1

In order to add left margin to datepicker placeholder you need to add the following code in your css

<mat-form-field class="my-class">

::ng-deep .my-class .mat-form-field-label{
   padding-left: 20px;
}

Note: Without using ::ng-deep your padding left will not have any effect not even for 10 or 15px.

Answer 2

You can target mat-form-field-label add some custom class to your wrapper element(exmple:-<mat-form-field class="custom-field"> ) and add following styles in style.css

.custom-field .mat-form-field-label{
padding-left: 10px;
}

working demo