bug: Ionicon does not properly switch icons based on the mode in React & Vue

[brandyscarney]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Setting the ios and md properties on <ion-icon> in Vue and React is not switching between them properly when setting the mode in the global config.

Expected Behavior

The ion-icon should respect the global config and switch the icon based on the mode.

Steps to Reproduce

Using the following markup:

Vue

<ion-icon slot="icon-only" :ios="star" :md="heart"></ion-icon>

and setting the config globally:

createApp(App).use(IonicVue, {
  mode: 'ios'
}).mount('#app');

React:

<IonIcon slot="icon-only" ios={star} md={heart}></IonIcon>

and setting the config globally:

setupIonicReact({
  mode: 'ios',
});

Results

If you switch the mode above in either example from ios to md you'll see the icon being displayed is always the heart.

It seems that the icon switches based on the platform as emulating ios does work to change the icon.

Code Reproduction URL

https://stackblitz.com/edit/angular-rduzd8?file=src%2Fcomponents%2FExample.vue,src%2Fmain.ts

Ionic Info

Ionic:

   Ionic CLI       : 6.20.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.3.3

Capacitor:

   Capacitor CLI      : 4.4.0
   @capacitor/android : not installed
   @capacitor/core    : 4.4.0
   @capacitor/ios     : not installed

Utility:

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

System:

   NodeJS : v16.17.0 (/usr/local/bin/node)
   npm    : 8.15.0
   OS     : macOS Monterey

Additional Information

No response

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