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

1 hack, 1 attempt that does not work and 1 custom css

1. Hack

We capture the info of the icon and render it "bareback"

app.component.ts

import { faDownload } from '@fortawesome/free-solid-svg-icons';

...

export class AppComponent implements OnInit {
  title = 'app';
  faDownload = faDownload;
  dtOptions: any = {};

...

  elTexto = '<fa-icon class="ng-fa-icon">
  <svg
    aria-hidden="true" data-prefix="'+this.faDownload.prefix+'" data-icon="'+this.faDownload.iconName+'"
    class="svg-inline--fa fa-'+this.faDownload.iconName+'" role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 '+this.faDownload.icon[0]+' '+this.faDownload.icon[1]+'">
    <path fill="currentColor" d="'+this.faDownload.icon[4]+'"></path></svg></fa-icon> Download
  ';

ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 20,
      dom: 'Bfrtip',
      // Configure the buttons
      buttons: [
        'print',
        'excel',
        {
          text: this.elTexto,
          key: '1',
          action: function (e, dt, node, config) {
            alert('Button activated');
          }
        }
      ]
    };

2. factory / injector does not walk = /

render the button icon as a component

app.components.js

import {
  Component,
  OnInit,
  ComponentFactoryResolver,
  ComponentRef,
  Injector
} from '@angular/core';

import { ButtonDownloadComponent } from './buttons/button-download/button-download.component';

...

  constructor(
    private http: Http,
    private resolver: ComponentFactoryResolver,
    private injector: Injector
  ) { }
  factory = this.resolver.resolveComponentFactory(ButtonDownloadComponent);
  btnDownloadComponent = this.factory.create(this.injector);

  elTexto = this.btnDownloadComponent.location.nativeElement;

ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 20,
      dom: 'Bfrtip',
      // Configure the buttons
      buttons: [
        'print',
        'excel',
        {
          text: this.elTexto,
          key: '1',
          action: function (e, dt, node, config) {
            alert('Button activated');
          }
        }
      ]
    };

button-download.component.ts

import { Component } from '@angular/core';
import { faDownload } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-button-download',
  template: '<fa-icon [icon]="faDownload"></fa-icon> Download'
})
export class ButtonDownloadComponent {
  faDownload = faDownload;
}

Add import, declarations and entrycomponents to the module

app.module.ts

...

import { AppComponent } from './app.component';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ButtonDownloadComponent } from './buttons/button-download/button-download.component';


@NgModule({
  declarations: [
  ...
    ButtonDownloadComponent
  ],
  ...
  entryComponents: [
    AppComponent,
    ButtonDownloadComponent
  ],

in theory it should render the whole thing but it is half-way:

<button class="dt-button" tabindex="0" aria-controls="DataTables_Table_0">
  <span>
    <app-button-download>
      <fa-icon class="ng-fa-icon"></fa-icon> Download
    </app-button-download>
  </span>
</button>

3 Custom CSS

We define a CSS class that simulates being fontawesome in order to put <i class="fe fe-download"></i> Download , in the text of the button.

You can either put it directly in the app.component.css or inject a component with your css.

I put the second option that is a variation of the proposal 2

we take the svgPathData, width and height from

./node_modules/@fortawesome/free-solid-svg-icons/faDownload.js

and we put together a svg in the CSS of the component

button-download.component.css

.fe:before {
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: " ";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin: -2px 0;
}
.fe-download:before {
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"><path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" /></svg>') !important;
}

We update the template of the component

button-download-component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-button-download',
  template: '<i class="fe fe-download"></i> Download',
  styleUrls: ['./button-download.component.css']
})
export class ButtonDownloadComponent {}

The advantage of the latter is that you can do without the fontawesome in the component (and if you clean the app globally as well) It's basically doing the "Tree shaking" of the final bundle by hand.

Note If someone can discern why Method 2 does not work (or if it is a bug), I would be very interested in how to solve it. I get the impression that it is implicit in this question, that's why I do not open another one.

You should put it this way:

            text: '<i class="fab FA-ICONO-ICONO"></i>',

On the web of font awesome you can choose the icon you want to show and below you will get the code, you just have to replace it with FA-ICONO-ICONO. For example, for a button with a PDF icon, it would be:

buttons: [
        //...
        {
            extend: 'pdf',
            text: '<i class="far fa-file-pdf"></i>',
        }
    ]    

If you do not use AngularCLI, you can try this another way:

<fa name="NOMBRE ICONO"></fa>

Greetings

Do you use PHP ?, for example, this code is a button / icon and when you click on it, it shows a modal to modify data:

<a href="" title="Modificar" class="text-success" data-target="#modificar_datos-<?php echo $f['iduser'] ?>" data-toggle="modal">
<i class="fa fa-fw fa-pencil-square-o"></i>
</a>

And this is to remove the record from the table

<a href="#" data-href="./php/datos_eliminar.php?id=<?php echo $f['iduser']; ?>" data-toggle="modal" data-target="#confirm-delete">
<i class="fa fa-fw fa-trash-o"></i></a>

And here the modal to confirm if you want to delete the record

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">				
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Eliminar Registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
				
<div class="modal-body">¿Desea eliminar este registro?</div>
					
<div class="modal-footer">
<button type="button" class="btn btn-default" data dismiss="modal">Cancelar</button>
<a class="btn btn-danger btn-ok">Eliminar</a>
</div>
</div>
</div>
</div>
		

Greetings

You could load the source of font-awesome in your css and enter the character "by hand" (which is what the FAss css basically does, load the font and enter the characters with: before), but it would be Not very efficient because you would load many icons that you will not use. If you are only going to use a few, maybe you are more interested in introducing them as vectors svg and so you can change them to the color and size you need. Here is a list of awesome icons in svg and png format

link