Use MathSymbolsFont.getRichTextMarkup

[pixelzoom]

I see this kind of thing in curve-fitting and area-model-common, search for <i style='font-family:

// PointNode.js
const Y_PATTERN = `<i style='font-family:${CurveFittingConstants.EQUATION_SYMBOL_FONT.family}'>{{y}}</i>`;
...
        y: StringUtils.fillIn( Y_PATTERN, {
          y: ySymbolString
        } )

FYI, MathSymbolsFont provides support for this:

  /**
   * Converts a string to the markup needed to display that string with RichText, using the same family as MathSymbolFont.
   * @param text
   * @param [style] - see Font options.style
   */
  public static getRichTextMarkup( text: string, style = DEFAULT_STYLE ): string {

In the PointNode.js example above, Y_PATTERN is unecessary, and it becomes:

        y: MathSymbolsFont.getRichTextMarkup( ySymbolString )