Ionic v2 ActionSheet: custom icon or image

[ryanlin1986]

In v2, the button text can not support html, such as <i class="fa fa-user"></i>test button.
It worked in v1, is there any plan to support this?

[jgw96]

Hello @ryanlin1986 ! Im sorry, but im not sure i understand exactly what the issue is. Are you wanting to put a button inside another button? Thanks for using Ionic!

[ryanlin1986]

Sorry, I have updated my question, something is hidden.
Basically, I want use font awesome icon, or custom image for my button

[jgw96]

Hey @ryanlin1986 . You can definitely use icons in our buttons. Can you try this for me?

<button fab fab fixed fab-right fab-bottom>
  <ion-icon name="add"></ion-icon>
</button>

[ryanlin1986]

I mean the button item of action sheet.

[jgw96]

Hey @ryanlin1986 it should work the same way on an action sheet (: Would you mind making a plunker that demonstrates your issue?

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

[Kobzol]

Is there any way to add a custom image to an action sheet button? The action sheet component supports buttons, but it seems that only their text can be set, i.e.:

let actionSheet = this.actionSheetController.create({
      title: 'Test',
      buttons: [
        {
          text: 'Destructive'
        }]
    });

[ryanlin1986]

@Kobzol That is just what I said, my bad I really don't know how to express my question more clearly that @jgw96 can understand

[Kobzol]

@ryanlin1986 I finally found out how to do it, you can add the icon using the icon attribute for every button. It can contain any ionicon.

let actionSheet = this.actionSheetController.create({
      title: 'Test',
      buttons: [
        {
          text: 'Test 1',
          icon: 'check'
        },
        {
          text: 'Test 2',
          icon: 'close'
        }]
    });

Reference: ionic-team/ionic-preview-app@3fa3c62

[ryanlin1986]

I want use font awesome instead ionic icon, no way to do this for now,
never mind, I just created my own ActionSheet component do replace ionic's built in ActionSheet, much better control over this.

[mm185]

I agree, it would be great to add your own template code to the actionsheet.
Or at least be able to set your own icons/images.
I did a workaround and added dynamic css code with the images as a background property for the buttons. Problem with this approach is, that if the button gets clicked, it will override the background css property, and the image will disapear. Setting it to "!important" will work, but have the drawback that it will give no visual feedback(grey background), on click of the button.
See example:

let buttons = [];
this.actionSheetStyles = [];
let categories = ["cat1","cat2","cat3"];
let images = ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg"];
for (let i = 0; i < categories.length; i++) {
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = '.customCSSClass' + i + '{background: url(' + "'" + images[i] + "'" + ') no-repeat !important;padding-left:80px;height:80px}';
  document.getElementsByTagName('head')[0].appendChild(style);
  actionSheetStyles.push(style);
  buttons.push({
    text: categories[i], 
    role: 'destructive', 
    cssClass: 'customCSSClass' + i
  });
}
this.actionSheet = this.actionSheetController.create({
  title: 'Choose your Category',
  buttons: buttons,
});
this.actionSheet.onDidDismiss(() => {
    // Don't forget to delete css styles on close of actionSheet:
    for (let i = 0; i < this.actionSheetStyles.length; i++) {
      if (this.actionSheetStyles[i].parentNode != null) this.actionSheetStyles[i].parentNode.removeChild(this.actionSheetStyles[i]);
    }
});

[kmiloangel]

Actually is easier than it looks, this is an example with whatsapp icon, just add this to your app.scss:

.ion-md-whatsapp:before, .ion-ios-whatsapp:before{
font-family: "FontAwesome" !important;
content: '\f232' !important;
color: #25d366;
}
Will work for android and ios.

[cricri92]

Hi! I'm using actionsheets on my project and it's working great! But I want to use custom icons (instead of ionicons) in my actionsheet's options, for example:

presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Modify your album',
buttons: [
{
text: 'Favorite',
icon: '<i class="fa fa-star"></i>'
handler: () => {
console.log('Favorite clicked');
}
}, ...
]
});

Sorry for my bad codem and thanks!

[qazio]

Does anyone have a work around for this yet? I am looking to add custom icons to the buttons.

[ryanlin1986]

Not yet as I know, my solution is write my own action sheet control instead of use ionic's built-in.

[btsiders]

I use my own icons in my app and don't even include the ionicons set. To get the Ionic action sheets to show my icons, I just

1. set the icon value of each action sheet button to whatever I want

let actionSheet = this.actionCtrl.create({
	buttons: [
		{
			text: 'Edit',
			icon: 'edit',
			handler: () => {
				this.openEditPage();
			}
		},
...

2. set my app mode to 'md' because I am forcing Material Design everywhere

IonicModule.forRoot(MyApp, { mode: 'md', ...

3. add a CSS background for the class .ion-md-[my-icon-name] to use in-line SVG data that matches my icons, since CSS cannot yet pull this from a separate file

.ion-md-edit {
	// Eventually, this may work...
	//background: url('/assets/icon/icons.svg#icon-edit') 50% 50% no-repeat;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0...wvcGF0aD48L3N2Zz4=') 50% 50% no-repeat;
}

I used to use this same trick for tab icons, but I no longer use tabs and am not sure if there is a better way now. Also, this would work for non-md, too, you just have to override the correct class based on which mode you are in.

EDIT: I was showing BASE64 versions of SVG icons. You can do font-based or whatever you want. I'm moving from BASE64 to URL-encoded SVG. https://css-tricks.com/probably-dont-base64-svg/

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.