如何更改有角度的材料排序图标 [英] How to change angular material sort icon

问题描述

我需要将默认箭头图标从有角材质 matSort 更改为自定义箭头.

I need to change default arrow icon from angular material matSort to a custom arrow.

当前代码

 <mat-table #table [dataSource]="source" matSort (matSortChange)="sortData($event)" [matSortActive]="sort.active" [matSortDirection]="sort.direction">

有没有办法做到这一点?

Is there any way to do this ?

推荐答案

::ng-deep .mat-sort-header-arrow[style] {

  // Hide default arrow stem
  .mat-sort-header-stem {
    display: none;
  }
  .mat-sort-header-indicator {
    opacity: 1;
    color: black;
    font-weight: bold;

    // Hide default arrow as its composed of left, right and middle
    .mat-sort-header-pointer-left, .mat-sort-header-pointer-right, .mat-sort-header-pointer-middle  {
      display: none;
    }
  }
}

// My custom ascending arrow
[aria-sort="ascending"] {
  ::ng-deep .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        content: "\2191";
        top: -1.6em;
        position: absolute;
      }
    }
  }
}

// My custom descending arrow
[aria-sort="descending"] {
  ::ng-deep .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        content: "\2193";
        top: -2.4em;
        position: absolute;
      }
    }
  }
}

这篇关于如何更改有角度的材料排序图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！