How to update ion-icon inside ActionSheetController Button?

Ionic Framework
1

In my Ionic 5 app, I am displaying some buttons inside an ActionSheetController:

cancel1
cancel1694×653 20.4 KB

Here is my latest code:

onMechanicClick(mechanicId: string) {
    this.actionSheetCtrl.create({
      header: 'Choose an Action',
      buttons: [
        {
          text: 'Book Appointment',
          icon: 'calendar-outline',
          handler: () => {
            this.goToProfile(mechanicId);
          }
        },
        {
          text: 'Call Me',
          icon: 'call-outline',
          handler: () => { }
        },
        {
          text: 'Message Me',
          icon: 'mail-outline',
          handler: () => {
            this.goToConversationDetail(mechanicId);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          icon: 'close-outline',
          handler: () => { }
        },
      ]
    }).then(actionSheetEl => {
      actionSheetEl.present();
    });
  }

I would like to assign the danger color to the text & icon inside the Cancel button.

I tried creating a CSS class & assigning it below, but that is not resulting in any change.

Can someone please tell me what changes are required to do this?

{
    text: 'Cancel',
    role: 'cancel',
    icon: 'close-outline',
    cssClass: 'cancel',
    handler: () => { }
}

Component CSS:

.cancel {
color: red;
}

I also tried to put this CSS into App Component CSS, but that doesn’t work either.