If you want to achieve a custom styling with Angular Material, you'll need to overwrite some of the style classes.
I've made some modifications below, you can add the following CSS classes in your styles.scss file to see if it gives you the desired result.
Feel free to adjust the pixel values to fine-tune the labels.
// dropdown label
.mat-form-field-label {
padding-left: 10px;
}
// dropdown label
.mat-form-field-flex {
padding-top: 6px!important;
}
// dropdown label
.mat-form-field-appearance-fill .mat-form-field-infix {
padding-bottom: 6px!important;
}
// dropdown options style
.mat-select-panel .mat-optgroup-label, .mat-select-panel .mat-option {
height: 38px!important;
}
// dropdown options style
.mat-select-panel .mat-option {
padding-left: 25px !important;
}
// selected value text style
.mat-select-value-text {
padding-left: 10px !important;
}
For better CSS handling without imports, make sure to provide explicit CSS directives. For example, for the code snippet below:
<custom-directive>
<mat-label >Select</mat-label>
</custom-directive>
, you should write the CSS directive as follows:
custom-directive mat-label {
// your CSS rules here
}
You can use the inspect element feature in Chrome to identify the correct CSS selectors, as shown in the example image below.
Stackblitz code : https://stackblitz.com/edit/angular-fjy4y5-r8urqh?file=src/styles.scss