fix(vue): correctly handle platform specific icons (#22200)

resolves #19078

packages/vue/src/components/IonIcon.ts

@@ -0,0 +1,44 @@
+import { h, defineComponent } from 'vue';
+import { isPlatform } from '@ionic/core';
+
+export const IonIcon = defineComponent({
+  name: 'IonIcon',
+  props: {
+    ariaLabel: String,
+    color: String,
+    flipRtl: Boolean,
+    icon: String,
+    ios: String,
+    lazy: String,
+    md: String,
+    mode: String,
+    name: String,
+    size: String,
+    src: String
+  },
+  setup(props, { slots }) {
+    return () => {
+      const { icon, ios, md } = props;
+
+      let iconToUse: typeof icon;
+      if (ios || md) {
+        if (isPlatform('ios')) {
+          iconToUse = ios ?? md ?? icon;
+        } else {
+          iconToUse = md ?? ios ?? icon;
+        }
+      } else {
+        iconToUse = icon;
+      }
+
+      return h(
+        'ion-icon',
+        {
+          ...props,
+          icon: iconToUse
+        },
+        slots
+      )
+    }
+  }
+});

packages/vue/src/index.ts

@@ -10,6 +10,7 @@ export { IonRouterOutlet } from './components/IonRouterOutlet';
 export { IonTabButton } from './components/IonTabButton';
 export { IonTabs } from './components/IonTabs';
 export { IonTabBar } from './components/IonTabBar';
+export { IonIcon } from './components/IonIcon';
 export * from './components/Overlays';
 
 export { IonKeyboardRef, IonRouter, useBackButton, useIonRouter, useKeyboard } from './hooks';

packages/vue/src/proxies.ts

@@ -248,21 +248,6 @@ export const IonHeader = /*@__PURE__*/ defineContainer<JSX.IonHeader>('ion-heade
 ]);
 
 
-export const IonIcon = /*@__PURE__*/ defineContainer<JSX.IonIcon>('ion-icon', [
-  'mode',
-  'color',
-  'ariaLabel',
-  'ios',
-  'md',
-  'flipRtl',
-  'name',
-  'src',
-  'icon',
-  'size',
-  'lazy'
-]);
-
-
 export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', [
   'alt',
   'src',