在Angular Material排序标题中创建自定义箭头

Question

I am creating Angular 5 project and I wanted to create custom sort icon in sort header to achieve this effect https://fontawesome.com/icons/caret-up?style=solid . I don't want to have this default arrow.

I tried to change css style, but it seems not to work. Or maybe is there any way to replace this icon by custom using 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;
    }


  } 

Thank for any suggestions.

Edit.

If someone has this problem, I solved it by adding custom directive to mat-sort-header element. I also passed to directive the sort direction (ASC or DESC). Finally based on the direction I customized my sort icon using pure CSS.

Answer 1

see if this help you

 .triangle { overflow: hidden; position: relative; margin: 2em auto; border-radius: 20%; transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); width: 5em; height: 5em; } .triangle:before { border-radius: 20% 20% 20% 53%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%); position: absolute; background: #ccc; pointer-events: auto; content: ''; width: 5em; height: 5em; } .triangle:after { border-radius: 20% 20% 53% 20%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%); position: absolute; background: #ccc; pointer-events: auto; content: ''; width: 5em; height: 5em; } 

 <div class="triangle"></div>