Text Symbol Bug in 4.10 with icons

[BrandonFlessner]

I'd like to use Font Awesome or Bootstrap Glyphicons as point text symbols. This used to work in previous versions of the API but now throws an error: "Couldn't find font glyphicons-halflings-regular. Falling back to Arial Unicode MS Regular" Here is a sample:

https://codepen.io/anon/pen/eXwRvR

Relevant code:

const textSymbol = {
        type: "text", // autocasts as new TextSymbol()
        color: "#7A003C",
        text: "\ue021", // glyphicon home
        font: { // autocasts as new Font()
          size: 36,
          family: "Glyphicons Halflings"
        }
      };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you change "4.9" to "4.10" on line 17 in the codepen sample, it will break. Any ideas??

[Noah-Sager · Accepted solution]

Hi Brandon. At  version 4.10, we converted all layers in 2D MapViews to use WebGL. As part of this, we had a breaking change with the TextSymbol and Esri Icon Fonts:

https://developers.arcgis.com/javascript/latest/guide/release-notes/index.html#breaking-changes

Note that font family name has changed to "calcite-web-icons", and the TextSymbol now expects a resource in .pbf format. Also the default directory for finding these .pbf files will be https://static.arcgis.com/fonts

Soon you will have the ability to publish your own .pbf files, but until then, I don't think you will be able to work with the resource above. Hope this helps.

-Noah

[_____]

//

[Noah-Sager]

The link is just for clarification. It is not accessible directly. If you load an app with fonts (except for MapImageLayer), you will see requests to that url accessing .pbf font files. More info here: Labeling | ArcGIS API for JavaScript 4.16 

[_____]

//

[MarcBate]

Open the svg in a text editor and copy the value of the path attribute, then use a marker symbol and use that string as its path property. You can then set the color of the marker symbol. 

For svg taken from fonts, you will need to flip it horizontally and then again vertically (I used Illustrator), but I'm assuming there are other tools out there to do that.