Creating Custom Arrow In Angular Material Sort Header

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 ha

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

<divclass="triangle"></div>