⚖ emoji in filename is incorrectly displayed in multi-page app sidebar

Summary

I have a multi-page streamlit app with a file called 01_⚖️_some_page.py. But instead of seeing ⚖️ some page in the side bar , I get ⚖ some page.

Steps to reproduce

1. Create a multi-page app
2. Create a page called 01_⚖️_some_page.py
3. Open the browser and observe ⚖ some page

Expected behavior:

I’d expect to see

Actual behavior:

What I actually see is:

Is this a regression?

Not as far as I know. I have never tested this behaviour streamlit <1.10.0

Debug info

• Streamlit version: 1.10.0 and 1.11.0 (updated after discovering bug)
• Python version: Python 3.9.10
• Using Conda
• OS version: Ubuntu 20.04.4 LTS (via WSL in Win 10), also saw the issue when ran from Oracle Linux
• Browser version: Firefox 102.0.2, Chrome 103.0.5060.134, Edge 103.0.1264.71

Additional information

I thought it was a browser issue but I’ve tested it on Firefox, Chrome and Edge Chromium. Furthermore, I can use the browser dev tools to change the ⚖ emoji into a ⚖️ and get it to display the screenshot I posted under the `Expected Behavior" section.

I expect there to be something weird with this emoji, as I also had difficulties getting the right (colored vs uncolored) version to be displayed in the rendered Markdown of this PR. Can it maybe have something to do with Variant Form characters that are stripped out during the filename parsing?

[Vinno97]

Found it was also really broken for multi-character emoji like 💁🏻‍♂️. Started looking into how to fix it, but it appears #5122, included in Streamlit 0.13, fixed the incorrect emoji!

[Vinno97]

Sorry for the late response, but no. I actually made the images in the post using the devtools trick. It rather think it’s because this emoji is a multi-character emoji and that the variant form is somehow stripped away during loading.

Original:

After pasting the emoji in the devtools: