如何使用Material Icon替换Angular分页按钮的innerHTML内容？

需求：将Angular分页组件中的按钮文字替换为Material图标，目标效果为分页按钮显示「首页」「上一页」「下一页」「末页」对应的Material图标。

当前代码：

ngAfterViewInit() {
  this.current.paginator = this.paginator;
  const lastBtn = this.el.nativeElement.querySelector(
    '.mat-paginator-navigation-last'
  );
  if (lastBtn) {
    lastBtn.innerHTML = 'Last';
  }

  const firstBtn = this.el.nativeElement.querySelector(
    '.mat-paginator-navigation-first'
  );
  if (firstBtn) {
    firstBtn.innerHTML = 'First';
  }
}

修改步骤： #

1. 确认引入Material图标模块
   在项目根模块（如app.module.ts）中导入MatIconModule，确保图标能正常渲染：

   import { MatIconModule } from '@angular/material/icon';
   
   @NgModule({
     imports: [
       // ...其他已导入模块
       MatIconModule
     ]
   })
   export class AppModule { }
   

2. 替换按钮内容为Material图标
   修改ngAfterViewInit方法中的代码，将按钮文字替换为<mat-icon>标签，使用对应的Material图标名称：

   ngAfterViewInit() {
     this.current.paginator = this.paginator;
     // 替换末页按钮
     const lastBtn = this.el.nativeElement.querySelector('.mat-paginator-navigation-last');
     if (lastBtn) {
       lastBtn.innerHTML = '<mat-icon>last_page</mat-icon>';
     }
   
     // 替换首页按钮
     const firstBtn = this.el.nativeElement.querySelector('.mat-paginator-navigation-first');
     if (firstBtn) {
       firstBtn.innerHTML = '<mat-icon>first_page</mat-icon>';
     }
   
     // 可选：替换上一页/下一页按钮
     const prevBtn = this.el.nativeElement.querySelector('.mat-paginator-navigation-previous');
     if (prevBtn) {
       prevBtn.innerHTML = '<mat-icon>chevron_left</mat-icon>';
     }
   
     const nextBtn = this.el.nativeElement.querySelector('.mat-paginator-navigation-next');
     if (nextBtn) {
       nextBtn.innerHTML = '<mat-icon>chevron_right</mat-icon>';
     }
   }
   

3. 适配图标样式（可选）
   如果图标显示位置或按钮尺寸不合适，可在组件CSS文件中添加样式调整：

   .mat-paginator-navigation button {
     padding: 0 8px;
   }
   
   .mat-paginator-navigation mat-icon {
     vertical-align: middle;
   }
   

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