Align ionicActionsheet content

Using the IonicFramework, I am trying to align the contents of my $ionicActionSheet button.

Moreover, I want the wrapper to be centered (as by default) and the two inside have a pre-defined width such that the icons and the text are left-aligned (but centered in wrapper).

I tried the following, but it does not change anything, moreover, it says aligned in the center.

css

span.tab-action{
    padding: 0 10px;
}

i.icon-action{
  width: 150px;
  text-align: left !important;
}
i.text-action{
  width: 350px;
  text-align: left !important;
}

$ionicActionSheet

//
//
// Actionsheet
$ionicActionSheet.show({
          buttons: [
            { text: '<i class="ion-social-facebook icon-button icon-action" ></i>    <span class="tab-action"></span>     <i class="text-action">Facebook</i> ' }, 
            { text: '<i class="ion-social-instagram icon-button icon-action" ></i>   <span class="tab-action"></span>        <i class="text-width">Instagram</i> ' }, 
            { text: '<i class="ion-social-whatsapp icon-button icon-action" ></i>    <span class="tab-action"></span>        <i class="text-width">Whatsapp</i> ' }, 
            { text: '<i class="ion-more icon-button icon-action" ></i>               <span class="tab-action"></span>        <i class="text-width">More</i> ' }, 
            ],
          titleText: 'Share', 
          cancelText: 'Cancel',
          cancel: function() {
              // todo
          },
          buttonClicked: function(buttonIndex) {
              // todo
              return true;
          }
        })

You could use a custom class: cssClass.

$ionicActionSheet.show({
      buttons: [
    { text: '<i class="ion-social-facebook icon-button icon-action"></i><span class="tab-action"></span> <i class="text-action">Facebook</i> ' },
    { text: '<i class="ion-social-instagram icon-button icon-action"></i><span class="tab-action"></span><i class="text-width">Instagram</i> ' },
    { text: '<i class="ion-social-whatsapp icon-button icon-action"></i><span class="tab-action"></span><i class="text-width">Whatsapp</i> ' },
    { text: '<i class="ion-more icon-button icon-action"></i><span class="tab-action"></span><i class="text-width">More</i> ' },
    ],
      titleText: 'Share',
      cancelText: 'Cancel',
      cssClass: 'social-actionsheet',
      cancel: function() {
      // todo
      },
      buttonClicked: function(buttonIndex) {
      // todo
      return true;
      }
})

and define this kind of style:

.social-actionsheet .action-sheet .button
{
    padding: 0 10px;
    text-align: left !important;
}

.social-actionsheet .action-sheet .button .text-action
{
    margin-left: 30px;
}

.social-actionsheet .action-sheet .button .text-width
{
    margin-left: 50px;
}