Thursday, 27 December 2018

Ionic3 ActionSheet: How to use Custom Icons from Fontawesome?

I have the problem of using custom Icons from Fontawesome in my ActionSheet Buttons in Ionic3.

As far as I know you could add for example this code: <i class="fas fa-ad"></i> in the title/text property of your actionsheet button and the Icon appeared.

But since Ionic 3 the title/text property is restricted to string only and this doesnt work anymore.

I also tried those fontawesome icons as png and then use them as custom css background like in this Stackoverflow Question but this also doesnt work. The images just dont get shown.

So I just ended up using those ionicons, which are provided by ionic as icons, like this:

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', // will always sort to be on the bottom
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
}

Do you guys know how to add fontawesome icons to ActionSheet Buttons? I cant seem to find any useful help.



from Ionic3 ActionSheet: How to use Custom Icons from Fontawesome?

No comments:

Post a Comment