Cannot display emoji ✔️, 🙋‍♂️

[yzhang-gh]

Steps to Reproduce:

1. Open a new file
2. Copy these two emoji ✔️❌ to it
3. See this result

Expected

on Windows 10

---

2022.12: Edited to add a workaround:

Workaround. Append a color emoji font to the editor font family e.g.:

• Windows: Consolas, 'Courier New', monospace, 'Segoe UI Emoji'
• MacOS: Menlo, Monaco, 'Courier New', monospace, 'Apple Color Emoji'
• Linux: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback', 'Noto Color Emoji'

e.g. on macOS

• "editor.fontFamily": "Roboto Mono, 'Apple Color Emoji'",

or for a cross-platform solution:

• "editor.fontFamily": "Consolas, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji'"

[rebornix]

The style is decided by the browser and since we are using Chromium under the hood, it's Google's Emoji.

[rianadon]

This may not be how it really works, but from my understanding this is how Windows displays emoji as a fallback when no specific "emoji font" is used.

This can be fixed by adding 'Segoe UI Emoji' to the end of the editor.fontFamily setting so emojis fall back to the correct, colored font. Or you could use 'Segoe UI Symbol' instead to get monochrome emoji.

Thus, building off the default setting, Consolas, 'Courier New', monospace, 'Segoe UI Emoji' would give you colored emoji. This should really be the default. But for now you could change this yourself to make the emoji display correctly.

[yzhang-gh]

@rianadon many thanks!

[rianadon]

@alexandrudima I wouldn't call this an issue with something upstream since there is a solution to solve this in Electron/Chromium - add all the emoji fonts to the font stack. For example GitHub uses the emoji fonts for both macOS and Windows in their CSS (along with the native system fonts): -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol".

The fix to this would be to edit the default by appending Segoe UI Emoji and possibly the Apple emoji font too.