Change mat-paginator's [pageSizeOption] font-size and font-family

Question

I have a mat-paginator in my application but I can't seem to change the font-size of the [pageSizeOptions] when it is displaying.

<mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator>

I mean, the "10" is so small compared the "items per page" that is written right next to it.

CSS won't work even with :

.mat-paginator {
    font-family: 'Raleway'!important;
    font-size: large!important;
}

I've searched for a solution using the theme.scss :

$custom-typography: mat-typography-config(
  $font-family: '"Raleway", "sans-serif"',
  $body-2:        mat-typography-level(16px, 24px, 600)
);

@include mat-core($custom-typography);

But no success. Do you guys have any idea how to achieve that ?

Answer 1

Maybe you can use ::ng-deep on your style file:

::ng-deep .mat-select-value {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

::ng-deep .mat-option-text {
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}