How to span a Unicode character in a page?

Ionic Framework ionic-v3
1

I’m trying to span a simple hexagon (⬢) in my page, this way:
<span>&#x2b22;</span>

but I’m receiving a rectangle with a cross in the middle, like an error icon. I tried with the decimal code (&#11042;), but I’m receiving the same error. If I try other Unicode character (₹), like:
<span>&#8377;</span>

it loads normally. What can be causing this symbol to be missing?

As far as I know this error is related to the page encoding. But if that were wrong, no other Unicode character would work, right?

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\User\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.2
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0

I also tried to force the importation of Arial font for the <span> element, but same error icon is displayed.

2

I had to look for the fonts that supported this specific icon, here is a list. Then I imported though app.components.scss, in variables.scss it was not recognized:

@font-face {
  font-family: AppFont;
  src: url("/assets/fonts/FreeMono.ttf");
}
span {
  font-family: "AppFont" !important;
}