How to show icons in $cordovaActionSheet plugin buttonLabels in ionic framework?

Question

I am trying to add icon in buttonLabels in $cordovaActionSheet plugin but it didn't working. I have tried

var options = {
            title: 'Share',
            buttonLabels: ['<i class="ion-social-facebook"></i> Share via Facebook', '<i class="ion-social-twitter"></i> Share via Twitter'],
        };

but it prints tag as it is. How do I show icons in button labels ?

Answer 1

I see you have tagged ionic-framework as well. If you are using Ionic you can make use of $ionicActionSheet instead of the $cordovaActionSheet. See this doc.

With the $ionicActionSheet it is no problem adding images:

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {

 // Triggered on a button click, or some other target
 $scope.show = function() {

   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<i class="ion-social-facebook"></i> Share via Facebook' },
       { text: '<b>Share</b> This' },
       { text: 'Move' }
     ],
     destructiveText: 'Delete',
     titleText: 'Modify your album',
     cancelText: 'Cancel',
     cancel: function() {
      // add cancel code..
    },
     buttonClicked: function(index) {
       return true;
     }
   });

   // For example's sake, hide the sheet after two seconds
   $timeout(function() {
     hideSheet();
   }, 2000);

 };
});