Ngx-datatable: Ngx-datatable header sorting icons

[rakesh0692]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior:
Current behaviour in ngx-datatable as per below attached screenshot.

Expected behavior
I tried a lot to override this because my expectation whould as per below attached screenshot for sorting Icons

• Angular version:
  Angular 6

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[WillHall]

I just overwrote the font settings, like so:

[data-icon]:before {
  font-family: "FontAwesome" !important;
  content: "";
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="datatable-icon-"]:before,
[class*=" datatable-icon-"]:before {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.datatable-icon-filter:before {
  content: "\f0b0";
}
.datatable-icon-collapse:before {
  content: "\f147";
}
.datatable-icon-expand:before {
  content: "\f196";
}
.datatable-icon-close:before {
  content: "\f2d3";
}
.datatable-icon-up:before {
  content: "\f0de";
}
.datatable-icon-down:before {
  content: "\f0dd";
}
.datatable-icon-sort:before {
  content: "\f0dc";
}
.datatable-icon-done:before {
  content: "\f00c";
}
.datatable-icon-done-all:before {
  content: "\f05d";
}
.datatable-icon-search:before {
  content: "\f002";
}
.datatable-icon-pin:before {
  content: "\f276";
}
.datatable-icon-add:before {
  content: "\f196";
}
.datatable-icon-left:before {
  content: "\f104";
}
.datatable-icon-right:before {
  content: "\f105";
}
.datatable-icon-skip:before {
  content: "\f101";
}
.datatable-icon-prev:before {
  content: "\f100";
}

if you change the font from fontawesome - you have to change the content to reflect what the new font uses.

[lanxuexing]

try this one?
```css
/deep/ .ngx-datatable{
.sortable .sort-btn:before {
font-family: data-table;
content: "c";
}
.sortable .sort-btn.datatable-icon-down:before {
content: "f";
}
.sortable .sort-btn.datatable-icon-up:before {
content: "e";
}
}
````

[experionathira]

This solution is not working for me.any update on this?

[AbhishekBorkar04]

@lanxuexing and @WillHall Thanks for the solution but above solutions only work if we click on header. We want to display up and down arrow on initial load.when user click asc then only up arrow shows and vice-versa. Plz help with that

[lanxuexing]

@AbhishekBorkar04
Here is an example of StackBlitz

[designermanjeets]

You can add default unset icon like below:

.ngx-datatable { // datatable Style
  .datatable-header { // header Style
    .datatable-header-cell { // header Cell Style
      .sort-btn.datatable-icon-sort-unset::before { // Icon Style
        content: '\e968'; // You favorite Icon
        font-family: 'fontFamily'; // Your Font Family
        font-style: normal; // Font Style
     }
    }
  }
 }