fix(react): fixing type of icon in ToastOptions, ActionSheetOptions, f…

…ixes #20100

core/src/components/toast/readme.md

@@ -117,6 +117,7 @@ async function presentToastWithOptions() {
 ```tsx
 import React, { useState } from 'react';
 import { IonToast, IonContent, IonButton } from '@ionic/react';
+import { star } from 'ionicons/icons';
 
 export const ToastExample: React.FC = () => {
   const [showToast1, setShowToast1] = useState(false);
@@ -141,7 +142,7 @@ export const ToastExample: React.FC = () => {
         buttons={[
           {
             side: 'start',
-            icon: 'star',
+            icon: star,
             text: 'Favorite',
             handler: () => {
               console.log('Favorite clicked');

packages/react/src/components/IonActionSheet.tsx

@@ -1,5 +1,22 @@
-import { ActionSheetOptions, actionSheetController } from '@ionic/core';
+import { ActionSheetButton as ActionSheetButtonCore, ActionSheetOptions as ActionSheetOptionsCore, actionSheetController as actionSheetControllerCore } from '@ionic/core';
 
 import { createOverlayComponent } from './createOverlayComponent';
 
+export interface ActionSheetButton extends Omit<ActionSheetButtonCore, 'icon'> {
+  icon?: {
+    ios: string;
+    md: string;
+  };
+}
+
+export interface ActionSheetOptions extends Omit<ActionSheetOptionsCore, 'buttons'> {
+  buttons?: (ActionSheetButton | string)[];
+}
+
+const actionSheetController = {
+  create: (options: ActionSheetOptions) => actionSheetControllerCore.create(options as any),
+  dismiss: (data?: any, role?: string | undefined, id?: string | undefined) => actionSheetControllerCore.dismiss(data, role, id),
+  getTop: () => actionSheetControllerCore.getTop()
+};
+
 export const IonActionSheet = /*@__PURE__*/createOverlayComponent<ActionSheetOptions, HTMLIonActionSheetElement>('IonActionSheet', actionSheetController);

packages/react/src/components/IonToast.tsx

@@ -1,5 +1,22 @@
-import { ToastOptions, toastController } from '@ionic/core';
+import { ToastButton as ToastButtonCore, ToastOptions as ToastOptionsCore, toastController as toastControllerCore } from '@ionic/core';
 
 import { createControllerComponent } from './createControllerComponent';
 
+export interface ToastButton extends Omit<ToastButtonCore, 'icon'> {
+  icon?: {
+    ios: string;
+    md: string;
+  };
+}
+
+export interface ToastOptions extends Omit<ToastOptionsCore, 'buttons'> {
+  buttons?: (ToastButton | string)[];
+}
+
+const toastController = {
+  create: (options: ToastOptions) => toastControllerCore.create(options as any),
+  dismiss: (data?: any, role?: string | undefined, id?: string | undefined) => toastControllerCore.dismiss(data, role, id),
+  getTop: () => toastControllerCore.getTop()
+};
+
 export const IonToast = /*@__PURE__*/createControllerComponent<ToastOptions, HTMLIonToastElement>('IonToast', toastController);