Angular Material Pagination如何将首页、尾页图标替换为文字？

问题原因 #

你之前写的CSS不生效是因为content属性仅支持在::before/::after伪元素上使用，直接绑定到按钮元素本身不会生效。

方案1：纯CSS修改（无需改TS代码） #

如果你希望用CSS快速实现，直接替换为以下样式即可：

/* 隐藏首页、尾页的原生图标 */
::ng-deep .mat-paginator-navigation-first .mat-paginator-icon,
::ng-deep .mat-paginator-navigation-last .mat-paginator-icon {
    display: none !important;
}

/* 给首页、尾页按钮添加文字 */
::ng-deep .mat-paginator-navigation-first::before {
    content: "首页";
    font-size: 14px;
}
::ng-deep .mat-paginator-navigation-last::before {
    content: "尾页";
    font-size: 14px;
}

/* 调整按钮宽度适配文字显示 */
::ng-deep .mat-paginator-navigation-first,
::ng-deep .mat-paginator-navigation-last {
    min-width: 40px !important;
    width: auto !important;
    padding: 0 6px !important;
}

如果你的Angular版本不推荐使用::ng-deep，可以把以上样式放到全局的styles.css文件中，去掉::ng-deep前缀即可生效。

方案2：在现有自定义指令中修改（和你的现有逻辑更统一） #

你已经写了StylePaginatorDirective自定义指令，且内部已经有遍历分页按钮修改样式的逻辑，可以直接在原有逻辑基础上追加内容修改的代码：
打开style-page-directive.ts，找到buildPageNumbers方法里的setTimeout回调中的按钮遍历逻辑，在循环中追加以下判断即可：

for (let i = 0; i < nodeArray.length; i++) {
  if (nodeArray[i].nodeName === 'BUTTON') {
    // 追加以下两行判断：修改首页、尾页按钮内容
    if (nodeArray[i].classList.contains('mat-paginator-navigation-first')) {
      nodeArray[i].innerHTML = '';
      this.ren.appendChild(nodeArray[i], this.ren.createText('首页'));
    }
    if (nodeArray[i].classList.contains('mat-paginator-navigation-last')) {
      nodeArray[i].innerHTML = '';
      this.ren.appendChild(nodeArray[i], this.ren.createText('尾页'));
    }
    // 原有你写的样式修改逻辑保留不变
    if (nodeArray[i].innerHTML.length > 100 && nodeArray[i].disabled) {
      // ...原有逻辑不动
    }
    // ...其余原有逻辑全部保留
  }
}

这个方案不需要额外加CSS，所有修改逻辑都集中在你现有的分页自定义指令中，后续维护更方便。如果需要同时修改上一页、下一页的文字，只需要追加对应mat-paginator-navigation-previous、mat-paginator-navigation-next类名的判断即可。

内容的提问来源于stack exchange，提问作者Aleksandar Zoric