Создание собственной стрелки в заголовке сортировки углового материала

Question

Я создаю проект Angular 5, и я хотел создать собственный значок сортировки в заголовке сортировки, чтобы добиться этого эффекта https://fontawesome.com/icons/caret-up?style=solid. Я не хочу использовать эту стрелку по умолчанию.

Я пыталсяизменить стиль 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-header.Я также передал директиву направление сортировки (ASC или DESC).Наконец, в зависимости от направления, я настроил свой значок сортировки, используя чистый CSS.

Answer 1

посмотрим, поможет ли это вам

.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>