Please check this URL: https://iedcpg.org.br/doe/
I have this button, which some days ago the hearts were red:
If you select the button text content...
... and paste it on the Chrome address bar, the hearts are still red ...
But now the hearts are on the text color (white).
What's wrong? How to have those hearts back in red?
It's up to the font and text rendering engine how the emoji is displayed. It will look different on different devices, and, as you discovered, can even look different on different places on the same device. You also wouldn't complain that your a looks like ɑ, it's a similar thing here.
I assume Chrome changed it because it was unexpected to be rendered as emoji.
However, there are solutions for your problem:
Style the text yourself or use a glyph font or SVG icon, then you have full control over how it looks.
Append the VS16 character (&#FE0F;) to select Emoji rendering for the previous character*. This way, ❤ (ૌ) turns into ❤️ (ૌ&#FE0F;).
*: That is a variation selector. There is also VS15 (&#FE0E;) which does the opposite: forcing characters normally displayed as emojis into text rendering.
It's possible that this issue can also be caused by a recent bug in Chrome 96+ that made emojis render black and white when the font weight is set to anything that requires synthetic bolding for the given font.
If this is the case, eliminating "font-weight" from the style, or adding "font-weight: normal", will show emojis in color again. (Or just wait for the bug to be patched.)
