I couldn't find a way to add my custom icon to ionic 2/3 actionSheet.

presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
     title: 'Mode',     
     buttons: [
       {
         text: 'Add to Y' ,
         role: 'destructive',
         icon:"my_icon",
         cssClass:"yoy",
         handler: () => {
           console.log('Destructive clicked');
         }
       },   
       {
         text: 'Cancel',
         role: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ],

   });

   actionSheet.present();
 }

How can I add my own custom icons to the actionsheet buttons?

I couldn't find a way to add my custom icon to ionic 2/3 actionSheet.

presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
     title: 'Mode',     
     buttons: [
       {
         text: 'Add to Y' ,
         role: 'destructive',
         icon:"my_icon",
         cssClass:"yoy",
         handler: () => {
           console.log('Destructive clicked');
         }
       },   
       {
         text: 'Cancel',
         role: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ],

   });

   actionSheet.present();
 }

How can I add my own custom icons to the actionsheet buttons?

• javascript
• angular
• typescript
• ionic2

Share Improve this question Follow edited Apr 21, 2017 at 20:56 user2243952 asked Apr 21, 2017 at 20:25 user2243952user2243952 27733 gold badges66 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The ionic doc doesn't seem to propose any native way to do this. However, there is a way to achieve it using a custom class.

   let actionSheet = this.actionSheetCtrl.create({
     title: 'Mode',     
     buttons: [
       {
         text: 'Add to Y',
         // vvvvv set a custom class that will be used to display the icon
         cssClass: "class_used_to_set_icon",
         handler: () => {
           console.log('Add to Y clicked');
         }
       }
     ],

   });

   actionSheet.present();

Then in your src/app/app.scss define the following class:

.class_used_to_set_icon {
  // I'd suggest to have the icon in src/assets (eg ../assets/icon/favicon.ico)
  background-image: url("path/to/your/icon") !important;
  // to properly position the icon:
  background-repeat: no-repeat !important;
  background-position: 10px 10px !important;
  // to indent the text to the right of the icon:
  padding-left: 70px !important;
}

EDIT
Another way using custom icons from a font like ioon:

   let actionSheet = this.actionSheetCtrl.create({
     title: 'Mode',     
     buttons: [
       {
         text: 'Add to Y',
         // vvvvv set the custom icon class and a custom class to then improve display
         cssClass: "icon-drink actionSheet_withIoon",
         handler: () => {
           console.log('Add to Y clicked');
         }
       }
     ],

   });

   actionSheet.present();

Then in your src/app/app.scss define the following class:

// display the icon at the right size
.actionSheet_withIoon { font-size: 2.4rem !important; }
// correct the font dimensions and positioning of the text
.actionSheet_withIoon .button-inner {
  font-family: "Roboto", "Helvetica Neue", sans-serif;
  font-weight: bold;
  padding-left: 52px;
  margin-top: -20px;
  font-size: 1.6rem !important;
}

Turns out you can get around this by referencing FontAwesome - see https://codepen.io/ablewhite/pen/LyZNXZ for an example.

In your example, this could be (once the FontAwesome CSS has been referenced):

   let actionSheet = this.actionSheetCtrl.create({
     title: 'Mode',     
     buttons: [
       {
         text: '<i class="icon fa fa-plus"></i> Add to Y' ,
         role: 'destructive',
         cssClass: 'yoy',
         handler: () => {
           console.log('Destructive clicked');
         }
       },   
       {
         text: 'Cancel',
         role: 'cancel',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ],

   });

Should you need icons not available in FontAwesome, use the same technique with your own custom font.