I am trying use unicode symbol in one of the pages in my app, currently facing a issue where the symbol doesnt show up in mobile / andorid - chrome browser it shows empty box instead (No glyph found symbol). Works perfectly in desktop - chrome browser. (Added screenshots below).

I am trying to use "WIDE-HEADED RIGHTWARDS BARB ARROW" U+1F86A "🡪"

Unicode Symbol References:

http://xahlee.info/comp/unicode_arrows.html

https://unicode-table.com/en/1F86A/

As it is one of the common symbols supported in majority of the fonts , ideal expectation is it should render and show the arrow correctly.

Desktop View

Mobile View

I have re-created the issue in this codepen, any suggestions would be really helpful.

https://codepen.io/adatdeltax/pen/WNOdvre

<template>
  <div id="app">
    <p>
     🡪 Resources
    </p>
  </div>
</template>