I've been struggling with incorporating custom Fontawesome icons into my ActionSheet buttons in Ionic3.
Previously, I was able to use code like this:
<i class="fas fa-ad"></i>title/text property of the actionsheet button to display the icon.
However, with Ionic 3, the title/text property now only accepts strings, rendering this method ineffective.
I also attempted to use Fontawesome icons as PNG images and utilize them as custom CSS backgrounds, following advice from this Stackoverflow post, but unfortunately, the images failed to display.
Ultimately, I resorted to using Ionicons provided by Ionic as icons in my buttons, like so:
import { Component } from '@angular/core';
import { Platform, ActionSheetController } from 'ionic-angular';
@Component({
templateUrl: 'basic.html'
})
export class BasicPage {
constructor(
public platform: Platform,
public actionsheetCtrl: ActionSheetController
) { }
openMenu() {
let actionSheet = this.actionsheetCtrl.create({
title: 'Albums',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Delete',
role: 'destructive',
icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Share',
icon: !this.platform.is('ios') ? 'share' : null,
handler: () => {
console.log('Share clicked');
}
},
{
text: 'Play',
icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
handler: () => {
console.log('Play clicked');
}
},
{
text: 'Favorite',
icon: !this.platform.is('ios') ? 'heart-outline' : null,
handler: () => {
console.log('Favorite clicked');
}
},
{
text: 'Cancel',
role: 'cancel',
icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
}
Has anyone discovered a way to include Fontawesome icons in ActionSheet buttons? I've been searching for solutions without much luck.