Support custom icon classes

[zavan]

I'd like to use FontAwesome instead of Glyphicons to provide the icons, but this is not possible since icon classes are writen directly in the component template. I suggest we should be able to do something like:

icons = {
  sortAsc: 'fa fa-sort-asc',
  sortDesc: 'fa fa-sort-desc'
}

{{models-table customIcons=icons}}

But of course, keeping Glyphicons as the default.

[zavan]

If anyone is interested, right now I'm "aliasing" FA icons to glyphicons:

span.glyphicon.glyphicon-triangle-bottom:before {
  content: "\f150";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-triangle-top:before {
  content: "\f151";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-check:before {
  content: "\f046";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-unchecked:before {
  content: "\f096";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-chevron-left:before {
  content: "\f053";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-chevron-right:before {
  content: "\f054";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-menu-left:before {
  content: "\f060";
  font-family: FontAwesome;
}

span.glyphicon.glyphicon-menu-right:before {
  content: "\f061";
  font-family: FontAwesome;
}

You can get the "content" unicode for the icons here.

[listepo]

@zavan you can extend ember-models-table http://stackoverflow.com/questions/28654662/how-to-extend-an-ember-cli-addon and use any icons and classes :)

[arthur-s]

@listepo, @onechiporenko, @zavan I edited this module to Pure.css and FontAwesome
https://github.com/arthur-s/ember-models-table
without tests

[onechiporenko]

customIcons-option is added
Usage:

{{models-table data=data columns=columns customIcons=customIcons}}

customIcons:

customIcons = {
    'sort-asc': 'class-sort-asc',
    'sort-desc': 'class-sort-desc',
    'column-visible': 'class-column-visible',
    'column-hidden': 'class-column-hidden',
    'nav-first': 'class-nav-first',
    'nav-prev': 'class-nav-prev',
    'nav-next': 'class-nav-next',
    'nav-last': 'class-nav-last'
  };