如何将mat-paginator中的箭头替换为三角形图标？

我创建了MatPaginator组件（当前为默认箭头样式），希望将分页器中的箭头图标修改为三角形样式，现有代码如下：

现有代码 #

file.ts #

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;

file.html #

<mat-paginator [pageSizeOptions]="[5, 10, 15, 20]"></mat-paginator>

实现方法 #

通过自定义CSS覆盖MatPaginator的默认图标样式即可实现，步骤如下：

1. 隐藏默认箭头图标，用CSS伪元素绘制三角形替代；
2. 适配禁用状态的视觉反馈，保持交互一致性。

示例CSS代码 #

/* 隐藏默认箭头图标 */
.mat-paginator-navigation-previous .mat-icon,
.mat-paginator-navigation-next .mat-icon {
  display: none;
}

/* 上一页按钮的左三角形 */
.mat-paginator-navigation-previous:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid currentColor;
  margin-right: 4px;
}

/* 下一页按钮的右三角形 */
.mat-paginator-navigation-next:after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
  margin-left: 4px;
}

/* 禁用状态下的透明度调整 */
.mat-paginator-navigation-previous:disabled:before,
.mat-paginator-navigation-next:disabled:after {
  opacity: 0.5;
}

注意事项 #

• 若组件启用了ViewEncapsulation，需在样式前添加::ng-deep，或者将代码放入全局样式文件中：

  ::ng-deep .mat-paginator-navigation-previous .mat-icon {
    display: none;
  }
  

• 可通过修改边框宽度、margin值调整三角形的大小和位置，匹配你的UI设计需求。

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