ipsos-components/src/lib/sort/sort-header.html

Material Design components for Angular

<div class="mat-sort-header-container"
     [class.mat-sort-header-position-before]="arrowPosition == 'before'">
  <button class="mat-sort-header-button" type="button"
          [attr.aria-label]="_intl.sortButtonLabel(id)"
          [attr.disabled]="_isDisabled() || null">
    <ng-content></ng-content>
  </button>

  <div *ngIf="_isSorted()" class="mat-sort-header-arrow" [@indicatorToggle]="_sort.direction">
    <div class="mat-sort-header-stem"></div>
    <div class="mat-sort-header-indicator" [@indicator]="_sort.direction" >
      <div class="mat-sort-header-pointer-left" [@leftPointer]="_sort.direction"></div>
      <div class="mat-sort-header-pointer-right" [@rightPointer]="_sort.direction"></div>
      <div class="mat-sort-header-pointer-middle"></div>
    </div>
  </div>
</div>

<span class="cdk-visually-hidden" *ngIf="_isSorted()">
  &nbsp;{{_intl.sortDescriptionLabel(id, _sort.direction)}}
</span>