需要从 angular mat-paginator 自定义分页箭头（用其他图标替换）答案

【问题标题】：Need to customize pagination arrows from angular mat-paginator (Replace it with other icons)需要从 angular mat-paginator 自定义分页箭头（用其他图标替换）
【发布时间】：2022-11-16 05:30:22
【问题描述】：

我需要替换 angular mat-paginator 中的箭头图标，因为我需要定制设计。 mat-paginator 的链接如下。

https://material.angular.io/components/paginator/overview

试图调查： node_modules/@angular/material/paginator/ 找到一种方法来改变图标但没有运气

【问题讨论】：

标签： angular angular-material

【解决方案1】：

这可以通过修改这些类来完成：

.mat-paginator-navigation-previous
.mat-paginator-navigation-next
.mat-paginator-icon > path

首先，设置默认箭头图标display: none 的 SVG 路径：

// global level override
.mat-paginator-icon > path {  display: none; }

或者

//component level, using 'deep'
/deep/ .mat-paginator-icon > path {  display: none; }

使用 CSS 设置新图标：

使用background-image: url(...)
使用干净的 SVG dataUrl，例如来自 remixicon.com 这样的图标库。
例子：

/deep/ .mat-paginator-navigation-previous .mat-paginator-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z'/%3E%3C/svg%3E");
}

/deep/ .mat-paginator-navigation-next .mat-paginator-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z'/%3E%3C/svg%3E");
}

您可以调整 svg 宽度/高度/视图框以满足您的需要。

【讨论】：