如何更改角度材料排序图标答案

【问题标题】：How to change angular material sort icon如何更改角度材料排序图标
【发布时间】：2019-01-09 02:27:07
【问题描述】：

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

当前代码

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

有什么办法吗？

【问题讨论】：

无法更改该图标，因为从技术上讲，它不是图标 - 只是排列成看起来像箭头的线形 div。您必须将自己的图标添加到列标题并自己管理排序和图标可见性。
sortData($e) { $e.direction === 'asc'? (this.icon = 'myIcon') : (this.icon= 'myDescIcon') }``___ <mat-icon [maticon]="icon" class="mr2"></mat-icon>

标签： angular angular-material frontend angular-material2

【解决方案1】：

::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;
      }
    }
  }
}

【讨论】：

如果您可以将更多上下文添加到答案本身或作为代码块中的 cmets 以使正在发生的事情更加明显，那就太好了。简单地发布代码块通常不能提供解决问题所需的上下文。
添加了 cmets。希望对您有所帮助。
最好的解决方案恕我直言，如果你想在你的所有网站上使用它，请放入你的主要风格并删除 ng-deep
这个好像已经被弃用了

【解决方案2】：

@阿图尔

你可以试试这个

[aria-sort='ascending'] {
  ::ng-deep .mat-sort-header-arrow{
    .mat-sort-header-indicator {
      &::before{
        font: normal normal normal 1.1rem/1 FontAwesome;
        content: "\f0d7";
        position: absolute;
        top: .2rem;
      }
    }
  }
}

[aria-sort='descending'] {
  ::ng-deep .mat-sort-header-arrow { 
    .mat-sort-header-indicator {
      &::before{
        font: normal normal normal 1.1rem/1 FontAwesome;
        content: "\f0d8";
        position: absolute;
        top: -.9rem;
      }
    }
  }
}

【讨论】：

【解决方案3】：

Try this.
app.component.ts

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  title = 'app';
}


app.component.css

    .mat-sort-header-stem {
    height: 3px !important;
    width: 10px !important;
    transform: rotate(180deg) !important;
}
.mat-sort-header-pointer-left, .mat-sort-header-pointer-right {
    width: 7px !important;
    height: 3px !important;
}
.mat-sort-header-pointer-middle{
    width: 0px !important;
    height: 0px !important;
}

【讨论】：

【解决方案4】：

类似于@Amuthan 的答案，它隐藏了默认显示。此代码必须驻留在全局 css 中。它显示插入符号而不是箭头：

/* in global css document: */
/* this makes it so that sort header arrow is always shown: */
.mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
    opacity: 1 !important;
    color: blue;
    
  }
/* Hide the default sort arrow display: */
.mat-sort-header-stem {
    display: none  !important;
}
.mat-sort-header-pointer-left, .mat-sort-header-pointer-right {
    display: none  !important;
}
.mat-sort-header-pointer-middle{
    width: 0px !important;
    height: 0px !important;
}
/* show two carets on top of each other when not sorted takes place: */
    .mat-sort-header-arrow {
         .mat-sort-header-indicator {
           &::before {
             content: "<>"; 
             position: absolute;
             opacity: 1 !important;
             color:  blue !important;
             font-size: 1.2em;
             font-weight: bold;
             transform: translate(-10%, 20%)   rotate(90deg) !important;
           }
         }
       }

/* show ascending caret when sorted ascending:*/
[aria-sort="ascending"] {
 .mat-sort-header-arrow {
      .mat-sort-header-indicator {
        &::before {
          content: "<"; 
          position: absolute;
          color:  blue !important;
          opacity: 1 !important;
          font-size: 1.2em;
          font-weight: bold;
          transform: translate(0,0) rotate(90deg) !important;
        }
      }
    }
  }
  
 /* show descending caret when sorted descending: */
  [aria-sort="descending"] {
.mat-sort-header-arrow {
      .mat-sort-header-indicator {
        &::before {
          content: ">";
          position: absolute;
          color:  blue !important;
          opacity: 1 !important;
          font-size: 1.2em;
          font-weight: bold;
          transform: translate(0,-10%) rotate(90deg) !important;
        }
      }
    }
  }

这是结果：Table header with carets for sorting

【讨论】：

【解决方案5】：

基于我想出的@amuthan 解决方案，它与下拉菜单使用的箭头相同，并且在悬停时也会显示：

.mat-sort-header-arrow[style] {
  .mat-sort-header-stem {
    display: none;
  }
  .mat-sort-header-indicator {
    opacity: 1;
    color: black;
    font-weight: bold;

    .mat-sort-header-pointer-left, .mat-sort-header-pointer-right, .mat-sort-header-pointer-middle  {
      display: none;
    }
  }
}
.mat-sort-header-indicator {
  &::before {
    content: "";
    top: 0.1em;
    position: absolute;
    color: $primary;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
    margin: 0 4px;
    transform: rotate(180deg);
    opacity: 0.6;
  }
}


[aria-sort="ascending"] {
  .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        top: 0.1em;
        transform: rotate(180deg);
        opacity: 1;

      }
    }
  }
}

[aria-sort="descending"] {
  .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        top: -0.6em;
        transform: rotate(0);
        opacity: 1;
      }
    }
  }
}

【讨论】：

【解决方案6】：

我就是这样做的

<mat-header-cell *matHeaderCellDef (dblclick)="sortData(column.field)"> {{ column.title }}<mat-icon *ngIf="sort.active==column.field" style="font-size:11pt;color:dimgray;font-weight: 700;padding-left:5px">{{sort.direction=="asc"?"arrow_upward":"arrow_downward"}}</mat-icon></mat-header-cell>

<mat-icon *ngIf="sort.active==column.field" style="font-size:11pt;color:dimgray;font-weight: 700;padding-left:5px">{{sort.direction=="asc"?"arrow_upward":"arrow_downward"}}</mat-icon>**

【讨论】：