1 hack, 1 intento que no funciona y 1 custom css
1. Hack
capturamos la info del icono y lo renderizamos "a pelo"
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 no anda =/
renderizar el icono boton como componente
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;
}
Agregar al module los import, declarations y entrycomponents
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
],
en teoría debería renderizar el asunto completo pero se queda a medias:
<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
Definimos una clase CSS que simula ser fontawesome para poder poner <i class="fe fe-download"></i> Download
, en el texto del botón.
Se puede o poner directamente en el app.component.css o inyectar un componente con su css.
Te pongo la segunda opción que es una variación de la propuesta 2
sacamos el svgPathData, width y height de
./node_modules/@fortawesome/free-solid-svg-icons/faDownload.js
y armamos un svg en el css del componente
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;
}
Actualizamos el template del componente
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 {}
La ventaja de esto último es que podes prescindir del fontawesome en el componente (y si limpias la app globalmente también)
Es básicamente hacer a mano el "Tree shaking" del final bundle.
Nota
Si alguien puede discernir por qué no funciona el método 2 (o si es un bug), estaría muy interesado en como resolverlo.
Me da la impresión de que está implícito en esta pregunta por eso no abro otra.