How to put a Fontawesome icon on a DataTable button? - Angular

Question

I'm using angular-fontawesome and datatables and I want to create a button in the table, but instead of text I want to place an icon using fontawesome. I have the following code:

this.dtOptions = {
    //...
    buttons: [
        //...
        {
            extend: 'pdf',
            text: '<fa-icon [icon]="faDownload"></fa-icon>'
        }
    ]           
};

I know that I will not load the component of the icon in this way, but is there a way to do it without having to use the fontawesome css?

Answer 1

As long as you have fontawesome loaded you can just manipulate the className property. I will recommend you to reset the default button layout setup through the dom property as well. As other points out, do not mix angular (+2) directives with that part of the code. It will probably not work (I am into angular1, but its the same deal) and really not necessary anyway. Here is an example :

buttons: {
  //reset class and change the rendered tag 
  //from <button> to <i>
  dom: {
    button: {
      tag: 'i',
      className: ''
    }
  },
  //since we now have completely unstyled icons add
  //some space between them trough a .custom-btn class
  buttons: [
   {
     titleAttr: 'Download as PDF',
     extend: 'pdfHtml5',
     className: 'custom-btn fa fa-file-pdf-o',
     text: ''
   },
   {
     titleAttr: 'Download as Excel',     
     extend: 'excelHtml5',
     className: 'custom-btn fa fa-file-excel-o',
     text: ''
   },
   {
     titleAttr: 'Download as CSV',     
     extend: 'csvHtml5',
     className: 'custom-btn fa fa-file-text-o',
     text: ''
   },
   {
     titleAttr: 'Print',     
     extend: 'print',
     className: 'custom-btn fa fa-print',
     text: ''
   }
 ]
}    

.custom-btn {
  cursor: pointer;
  margin-right: 5px;
}

https://jsfiddle.net/r47ao4h3/

I do not have a working plunkr using DT and Angular2 at hand, but can produce an Angular1 example if you want. For all it is the same deal, there is no difference.

Answer 2

I think the only option is to use html. API says that you can use html in text property of button config. For example you can use something like this: <i class="fas fa-download"></i>