mat-paginator - change color of next and previous buttons - Angular 15 Material

Question

How can I change the next and previous buttons on the mat-paginator in Angular 15.

<mat-paginator
    id="paginator"
    #paginator
    [length]="totalPosts"
    [pageSize]="10"
    (page)="handlePageChange($event)"
    [hidePageSize]="true"
  >
  </mat-paginator>

I've tried the following

::ng-deep .mat-paginator .mat-icon-button
{
  background-color: red !important;
}

or

.mat-paginator-navigation-next,
.mat-paginator-navigation-previous {
    color: red;
}

or

::ng-deep .mat-paginator-navigation-next,
::ng-deep .mat-paginator-navigation-previous {
  color: red !important;
}`

How can I change the next and previous buttons? I appreciate any help.

Answer 1

When dealing with SVG icon to change it is color you should use fill property instead of background

Try this:

::ng-deep .mat-mdc-paginator-navigation-next .mat-mdc-paginator-icon{
  fill: red !important;
} 

Example