angular2-data-table icon power by font-awesome

datatable-icon.less

@import (reference) "../../../../node_modules/font-awesome/less/variables.less";

/* data-table */
[data-icon]:before {
    font-family: "FontAwesome" !important;
    content: attr(data-icon);
    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^="icon-"]:before,
[class*=" 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;
}

.icon-filter:before {
    content: @fa-var-filter;
}

.icon-collapse:before {
    content: @fa-var-minus;
}

.icon-expand:before {
    content: @fa-var-plus;
}

.icon-close:before {
    content: @fa-var-close;
}

.icon-up:before {
    content: @fa-var-chevron-up;
}

.icon-down:before {
    content: @fa-var-chevron-down;
}

.icon-sort:before {
    content: @fa-var-sort;
}

.icon-done:before {
    content: @fa-var-check-circle;
}

.icon-done-all:before {
    content: @fa-var-check-square;
}

.icon-search:before {
    content: @fa-var-search;
}

.icon-pin:before {
    content: @fa-var-thumb-tack;
}

.icon-add:before {
    content: @fa-var-plus;
}

.icon-left:before {
    content: @fa-var-chevron-left;
}

.icon-right:before {
    content: @fa-var-chevron-right;
}

.icon-skip:before {
    content: @fa-var-step-forward;
}

.icon-prev:before {
    content: @fa-var-step-backward;
}

Here is the SCSS variant

@import  '../../../../node_modules/font-awesome/scss/variables.scss';

/* data-table */
[data-icon]:before {
  font-family: "FontAwesome" !important;
  content: attr(data-icon);
  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^="icon-"]:before,
[class*=" 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;
}

.icon-filter:before {
  content: $fa-var-filter;
}

.icon-collapse:before {
  content: $fa-var-minus;
}

.icon-expand:before {
  content: $fa-var-plus;
}

.icon-close:before {
  content: $fa-var-close;
}

.icon-up:before {
  content: $fa-var-chevron-up;
}

.icon-down:before {
  content: $fa-var-chevron-down;
}

.icon-sort:before {
  content: $fa-var-sort;
}

.icon-done:before {
  content: $fa-var-check-circle;
}

.icon-done-all:before {
  content: $fa-var-check-square;
}

.icon-search:before {
  content: $fa-var-search;
}

.icon-pin:before {
  content: $fa-var-thumb-tack;
}

.icon-add:before {
  content: $fa-var-plus;
}

.icon-left:before {
  content: $fa-var-chevron-left;
}

.icon-right:before {
  content: $fa-var-chevron-right;
}

.icon-skip:before {
  content: $fa-var-step-forward;
}

.icon-prev:before {
  content: $fa-var-step-backward;
}