bug: not dispalying icons inside of toast buttons.

[victororlyk]

Bug Report

Ionic version:

[x] 4.11.5

Current behavior:

it doesn't show an icon when using documented methods in
https://ionicframework.com/docs/api/toast
Expected behavior:

show star icon

Steps to reproduce:

Related code:

      <IonToast
        isOpen={showToast2}
        onDidDismiss={() => setShowToast2(false)}
        message="we have done some stuff"
        position="top"
        buttons={[
          {
            side: 'start',
            icon: 'star',
            text: 'ok',
            handler: () => {
              console.log('Favorite clicked');
            }
          },
        ]}
      />

insert short code snippets here

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 5.4.12
   Ionic Framework : @ionic/react 4.11.5

Capacitor:

   Capacitor CLI   : 1.3.0
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.7.0
   npm    : 6.10.0
   OS     : macOS Catalina

[liamdebeasi]

Thanks for the issue. With Ionic React ionicons need to be specified using the icon property.

In Ionic Angular you would do:

<ion-icon name="star"></ion-icon>.

But in Ionic React you would do:

import { star } from 'ionicons/icons';

...

<IonIcon icon={star} />

With ion-toast, you provide the icon name as a string, so I think the same problem is happening here. If you passed in the star import as an icon it seems to work; however the typings are not correct so you need to typecast it as any as a temporary workaround.

import { star } from 'ionicons/icons';

...

<IonToast
  isOpen={showToast}
  onDidDismiss={() => setShowToast(false)}
  message="Click to Close"
  position="top"
  buttons={[
  {
    side: 'start',
    icon: star as any,
    text: 'Favorite',
    handler: () => {
      console.log('Favorite clicked');
    }
  }
]}

The docs are not very clear regarding this, but we are working on updating them with this information. Thanks!

[victororlyk]

@liamdebeasi thanks it worked,
the same situation is with IonItem

<IonItem
  detail={children.length}
  detailIcon={isOpen?arrowDown as any:arrowForward as any}
>
some
</IonItem>

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