Reducing arrow size of mat-paginator without using ng-deep

Question

I have used mat-paginator in my project and wanted to reduce size of pagination arrows without using ng-deep

screenshot of mat-paginator result

Currently I am able to do it with following code:

::ng-deep .mat-paginator-icon {
    width: 3vh;
    margin-top: -0.5vh;
  }

But have to do it without using ng-deep! Any suggestions?

I tried encapsulation: ViewEncapsulation.None and achieved results but that's affecting/disordering other UI features on that web page

Answer 1

add some class to your mat-paginator something like

<mat-paginator class="a-c"></mat-paginator>

then in your global style.css use this class to apply styles

.a-c .mat-paginator-icon {
    width: 3vh;
    margin-top: -0.5vh;
  }