Closed victororlyk closed 4 years ago
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!
@liamdebeasi thanks it worked, the same situation is with IonItem
<IonItem
detail={children.length}
detailIcon={isOpen?arrowDown as any:arrowForward as any}
>
some
</IonItem>
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.
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:
Other information:
Ionic info: