Emojis in Popups Rendering Incorrectly in Chrome (v4) - Potential Browser Compatibility Issue

[MatinT-SA]

I am experiencing an issue with rendering emoji flags inside popups using React-Leaflet v4.x in Chrome. When using country flag emojis (e.g., 🇮🇷, 🇨🇭), the emojis are displayed as text instead of being rendered as actual flag images. This issue does not occur in other browsers like Firefox, but it consistently happens in Chrome.

To clarify:

• Using country code emojis directly in the popup content results in them showing up as characters (e.g., 🇮🇷) but not as flags.
• Other content (text) inside the popup is displayed correctly, but the flags are not rendered properly.
• I'm using a Chrome extension called Country Flag Fixer, which fixed the issue for emojis in the rest of my app. However, I’m still encountering the same problem specifically in the Leaflet Popup component.

I believe this might be a Chrome-specific issue related to how it handles emoji rendering or a problem with how React-Leaflet handles emoji content in popups. Any guidance or a potential fix would be greatly appreciated!