如果要更改按钮图标，可以执行此操作。
为此，我们需要修改mat-paginator生成的html。
下面的指令执行此操作：

@Directive({
  selector: '[customPaginatorIcons]'
})
export class CustomPaginatorIcons implements AfterViewInit {

  constructor(
    private el: ElementRef,
    private renderer2: Renderer2
  ) {}

  ngAfterViewInit(): void {
    this.setFirstIcon();
    this.setPreviousIcon();
    this.setNextIcon();
    this.setLastIcon();
  }

  private replaceSvgWithIcon(
    btn: HTMLButtonElement,
    iconName: string
  ): HTMLSpanElement {
    this.renderer2.removeChild(btn, btn.querySelector('svg'));

    const icon: HTMLSpanElement = this.renderer2.createElement('span');
    this.renderer2.addClass(icon, 'material-icons');
    icon.innerHTML = iconName;

    this.renderer2.appendChild(btn, icon);
    return icon;
  }

  private setFirstIcon(): void {
    const btn = this.el.nativeElement.querySelector(
      '.mat-mdc-paginator-navigation-first'
    );

    if (btn) {
      this.replaceSvgWithIcon(btn, 'skip_previous');
    }
  }

  private setPreviousIcon(): void {
    const btn = this.el.nativeElement.querySelector(
      '.mat-mdc-paginator-navigation-previous'
    );

    if (btn) {
      const icon = this.replaceSvgWithIcon(btn, 'play_arrow');
      this.renderer2.setStyle(icon, 'transform', 'rotate(180deg)');
    }
  }

  private setNextIcon(): void {
    const btn = this.el.nativeElement.querySelector(
      '.mat-mdc-paginator-navigation-next'
    );

    if (btn) {
      this.replaceSvgWithIcon(btn, 'play_arrow');
    }
  }

  private setLastIcon(): void {
    const btn = this.el.nativeElement.querySelector(
      '.mat-mdc-paginator-navigation-last'
    );

    if (btn) {
      this.replaceSvgWithIcon(btn, 'skip_next');
    }
  }
}

现在说说原因。

• Directive：我们创建了attribute指令来调整MatPaginator的图标。当我们只想编辑html的东西时，推荐使用Attribute Directives。
• AfterViewInit：我们只能在MatPaginator html完全初始化后编辑它的内容。AfterViewInit生命周期钩子是最适合这个任务的钩子。
• ElementRef：它提供对放置指令的HTML代码的访问。
• Renderer2：recommended实用程序，用于安全地修改HTML元素。它是ngStyle和ngClass等指令用作场景的基础。我们可以通过直接编辑DOM元素来达到相同的目的，但如果编辑不正确，可能会产生错误。
• 第一个月9日至第一个月、第一个月10日至第一个月、第一个月11日至第一个月、第一个月12日至第一个月：这是非常相似的方法，它们搜索需要更新的按钮，如果存在，它们调用replaceSvgWithIcon方法来执行实际的更改。2唯一的例外是setPreviousIcon方法，因为没有与您想要的匹配的图标。3为了实现您想要的外观，我旋转下一个图标。
• replaceSvgWithIcon：首先从按钮中移除<svg>...</svg>标记。这是包含图标实际图像的标记，按钮元素中剩余的HTML用于其他内容，如涟漪。一旦元素被移除，我们将创建一个新的HTMLSpanElement。我们将在此元素上设置material-icons类（这样它就可以使用材质图标），以及图标的值。完成后，我们把它附加到提供的按钮上并返回（如果我们想修改一些非通用的东西，我们就返回元素）。

要使用此指令，我们只需调用分页器的html选择器：

<mat-paginator 
               ...
               customPaginatorIcons>
</mat-paginator>

上述情况适用于Angular 15。对于以前的版本，只需从选择器中删除“-mdc”，如下所示：

• '.mat-mdc-paginator-navigation-first'改为“Map分页器导航优先”;
• '.mat-mdc-paginator-navigation-previous'至'.mat-paginator-navigation-previous';
• '.mat-mdc-paginator-navigation-next'至'.mat-paginator-navigation-next';
• '.mat-mdc-paginator-navigation-last'至'.mat-paginator-navigation-last';

您也可以只使用.css来获取它
在样式. css中

.mat-mdc-paginator-navigation-first svg path{
  d:path("M6.5 18q-.425 0-.713-.288Q5.5 17.425 5.5 17V7q0-.425.287-.713Q6.075 6 6.5 6t.713.287Q7.5 6.575 7.5 7v10q0 .425-.287.712Q6.925 18 6.5 18Zm10.45-1.025l-6.2-4.15q-.45-.3-.45-.825q0-.525.45-.825l6.2-4.15q.5-.325 1.025-.038q.525.288.525.888v8.25q0 .6-.525.9q-.525.3-1.025-.05Z")
}
.mat-mdc-paginator-navigation-previous svg path{
  d:path("M7.05 16.975q-.5.35-1.025.05q-.525-.3-.525-.9v-8.25q0-.6.525-.888q.525-.287 1.025.038l6.2 4.15q.45.3.45.825q0 .525-.45.825Z")
}
.mat-mdc-paginator-navigation-next svg path{
  d:path("M7.05 16.975q-.5.35-1.025.05q-.525-.3-.525-.9v-8.25q0-.6.525-.888q.525-.287 1.025.038l6.2 4.15q.45.3.45.825q0 .525-.45.825Z")
}
.mat-mdc-paginator-navigation-last svg path{
  d:path("M17.5 18q-.425 0-.712-.288q-.288-.287-.288-.712V7q0-.425.288-.713Q17.075 6 17.5 6t.712.287q.288.288.288.713v10q0 .425-.288.712q-.287.288-.712.288ZM7.05 16.975q-.5.35-1.025.05q-.525-.3-.525-.9v-8.25q0-.6.525-.888q.525-.287 1.025.038l6.2 4.15q.45.3.45.825q0 .525-.45.825Z")
}

.mat-mdc-paginator-navigation-previous svg
{
  transform:rotate(180deg) translateX(3px)
}
.mat-mdc-paginator-navigation-next svg
{
  transform:translateX(3px)
}