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

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

It's very surprising to me that you are using the unit `vh` to change the width of the icon. This means that depending on the height of the viewport, the icon will have different sizes. For example, on a mobile phone in landscape mode, the icon will be barely visible. I would recommend to use `px` unit. — JSON Derulo, Jan 11 '23 at 08:13
@JSON Derulo thanks Sure, will do it but please give some suggestion on how can I reduce arrow size of mat-paginator without using ng-deep — Saad Ali, Jan 11 '23 at 08:19

score 0 · Answer 1 · answered Jan 11 '23 at 08:03

0

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;
  }

answered Jan 11 '23 at 08:03

jitender

I would be very surprised if this would work. The paginator icon is inside the `mat-paginator` component, so also in your example I strongly believe you need to use `::ng-deep`. – JSON Derulo Jan 11 '23 at 08:16
I tried it sir, but it didn't worked – Saad Ali Jan 11 '23 at 08:17
@SaadAli have you added the styles in style.css if so can you can stackblitz example for the same – jitender Jan 11 '23 at 08:23
@JSONDerulo should work as style.css styles are global not component related – jitender Jan 11 '23 at 08:24
@SaadAli working demo https://stackblitz.com/edit/angular-mat-paginator-a7h1dj?file=styles.css – jitender Jan 11 '23 at 08:35
You're right, in styles.scss there is no view encapsulation, so this works. – JSON Derulo Jan 11 '23 at 10:51

1 Answers1