bug: Defining an icon in Action Sheet button properties does not render icon

[magz99]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x, v8.x

Current Behavior

The ion-action-sheet component does not seem to render the icon provided in the ActionSheetButton properties. It happens both when the action buttons are passed as [buttons] property or via the ActionSheetController.
The icon value passed into the ActionSheetButton properties is an Ionicon name.

The <ion-icon> element will be rendered, but no icon is displayed.

Expected Behavior

The icon should be displayed within the ion-icon element that is rendered in the Action Sheet.

Steps to Reproduce

1. Create the ActionSheetButton array, and one of the buttons will have icon defined.
2. For the icon value, use any of the Ionicons values. Example: icon: 'add-circle-outline'
3. Pass the button array to an action sheet element in the template:

<ion-action-sheet
  trigger="open-action-sheet"
  class="my-custom-class"
  header="Example header"
  subHeader="Example subheader"
  [buttons]="actionSheetButtons"
></ion-action-sheet>

4. Observe the action sheet when it's opened, the icon will not be displayed

Code Reproduction URL

https://stackblitz.com/edit/angular-mnydcf?file=src%2Fapp%2Fexample.component.html

Ionic Info

I am using a stackblitz example taken from https://ionicframework.com/docs/api/action-sheet#theming

Additional Information

No response

[Julien-Marcou]

You can fix it by doing this where you are using the action sheet:

import { addIcons } from 'ionicons';
import { addCircleOutline } from 'ionicons/icons';

class YourComponent {
  constructor() {
    addIcons({
      addCircleOutline: addCircleOutline,
    });
  }
}

But as you should only need to do this when you are using angular/standalone, this is probably a bug ^^

[magz99]

Thanks @Julien-Marcou , I've tested addIcons in another project with Standalone, but see the same issue there too.

[thetaPC]

Thank you for submitting the issue!

I'm closing this as a duplicate since we are tracking this bug through ionic-team/ionic-docs#2892. It's related to StackBlitz. The bug doesn't occur outside of StackBlitz.

[magz99]

Got it thank you.
I tried in a non-standalone project and see the icon!

[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.