Javascript 在角度材质排序标题中创建自定义箭头

我正在创建Angular 5项目，我想在排序标题中创建自定义排序图标以实现此效果。我不想要这个默认箭头

我试图改变css样式，但似乎不起作用。或者，是否有任何方法可以使用JS将此图标替换为自定义图标

::ng-deep  {

    .cdk-visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .mat-sort-header-stem {
        background: none;
        display: none !important;
    }

    .mat-sort-header-container {
        position: relative;
    }
    .mat-sort-header-indicator {

      transform: translateY(0px) !important;
    }

    .mat-sort-header-arrow {
        position: absolute;
        right: 20px;
        transform: translateY(0%) !important;
    }


  } 

谢谢你的建议

编辑

如果有人有这个问题，我通过向mat sort头元素添加自定义指令来解决。我还向指令传递了排序方向（ASC或DESC）。最后，根据方向，我使用纯CSS定制了我的排序图标。

看看这是否有帮助

.triangle{
溢出：隐藏；
位置：相对位置；
利润率：2米自动；
边界半径：20%；
变换：平移（50%）旋转（30度）倾斜（30度）缩放（.866）；
宽度：5em；
身高：5公分；
}
.三角：以前{
边界半径：20%20%20%53%；
变换：scaleX（1.155）歪斜（-30度）旋转（-30度）平移（-42.3%）歪斜x（30度）scaleX（.866）平移（-24%）；
位置：绝对位置；
背景：#ccc；
指针事件：自动；
内容：''；
宽度：5em；
身高：5公分；
}
.三角形：之后{
边界半径：20%20%53%20%；
变换：scaleX（1.155）歪斜（-30度）旋转（-30度）平移（-42.3%）歪斜（-30度）scaleX（.866）平移（-24%）；
位置：绝对位置；
背景：#ccc；
指针事件：自动；
内容：''；
宽度：5em；
身高：5公分；
}

---

你的建议很有帮助，但我用另一种方式解决了它。为了检测排序方向，我必须将指令添加到排序按钮。之后，我用CSS设计了这个按钮的样式。不管怎样，谢谢你的回答。我也面临同样的问题，你能提供更多你的解决方案的数据吗？试试这个点击垫排序图标的改变，像插入符号一样