@import 'mixins';

:host {
  display: table-cell;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: left;
  text-overflow: ellipsis;
  @include userSelect(none);

  &.sortable:hover {
    cursor: pointer;
  }

  &.sorted-ascending > span, &.sorted-descending > span {
    margin-right: 5px;
  }

  &.sorted-ascending > span::before {
    font-family: 'Material Icons';
    vertical-align: sub;
    padding-right: 5px;
    content: '⬇';
  }

  &.sorted-descending > span::before {
    font-family: 'Material Icons';
    vertical-align: sub;
    padding-right: 5px;
    content: '⬆';
  }

  &.numeric {
    text-align: right;
  }
}

@import 'mixins';

:host {
  display: table-cell;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: left;
  text-overflow: ellipsis;
  @include userSelect(none);

  &.sortable:hover {
    cursor: pointer;
  }

  &.sortable > span {
    margin-right: 5px;
  }

  &.sortable > span::after {
    visibility: hidden;
    font-family: 'Material Icons';
    vertical-align: sub;
    padding-left: 5px;
    content: '\E5DB';
  }

  &.sorted-ascending > span::after {
    visibility: visible;
  }

  &.sorted-descending > span::after {
    visibility: visible;
    content: '\E5D8';
  }

  &.numeric {
    text-align: right;
  }
}

Fix mdIcon use proper material arrow icon instead of HTML ascii basics arrow Arrow icons align right to the column name and toggle visibility on hidden/visible to avoid the moving size of the table
Fix mdIcon use proper material arrow icon instead of HTML ascii basics arrow
Arrow icons align right to the column name and toggle visibility on hidden/visible to avoid the moving size of the table
