如何在DataTable按钮上放置一个Fontawesome图标？
我正在使用angular-fontawesome和datatables，我想在表格中创建一个按钮，但不是文本，我想使用fontawesome来放置图标。 我有以下代码：
this.dtOptions = {
//...
buttons: [
//...
{
extend: 'pdf',
text: '<fa-icon [icon]="faDownload"></fa-icon>'
}
]
};
我知道我不会以这种方式加载图标的组件，但有没有办法做到这一点，而无需使用fontawesome css？
我认为唯一的选择是使用HTML。 API说你可以在按钮配置text属性中使用html。 例如，你可以使用像这样的东西： <i class="fas fa-download"></i>
只要你有可靠的加载，你可以操纵className属性。 我会建议你通过dom属性重置默认的按钮布局设置。 正如其他指出的那样，不要将角度（+2）指令与该部分代码混合使用。 它可能不会工作（我进入angular1，但它是相同的交易），真的没有必要。 这里是一个例子：
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/
我没有使用DT和Angular2的工作plunkr，但可以生成一个Angular1的例子，如果你想。 所有这一切都是一样的，没有任何区别。
如果你想使用角度组件而不是原始html，那么你将不得不在隐藏的容器中预先渲染角度组件（例如，使用组件工厂动态创建fa-icon组件），然后手动将呈现的html复制到按钮配置。 这是非常复杂的过程，没有什么好处。