Use MS fill version in react native

[Falicitas]

Hi,

First of all, thank you for providing such an extensive collection of icons!

I have a question: is there any way to use the outlined-fill version of Material Symbols in React Native? I’ve encapsulated my Material Symbols component like this and it works well in non-fill symbols:

<Text
  style={[
    {
      fontFamily: 'MaterialSymbolsOutlined-Regular',
      fontSize: size,
      fontWeight: 500 as TextStyle['fontWeight'],
      color,
    },
    style,
  ]}
>
  {String.fromCharCode(parseInt('e838', 16))} // 'star' icon
</Text>

Although I’ve tried several approaches, such as appending the code point with "-fill" or setting the fontWeight to an extremely high value, I couldn’t find a way to access the fill version of the Material Symbols.

Is there any workaround or guidance you can provide? Or should I open an issue with React Native instead?

[tphinney]

From what I have read, apparently React Native simply does not support variable fonts. People claim it does, and then explain that it works by the user generating a separate non-variable font file for each style they want up front... good grief, the barbarism! 😛

Now, even beyond that, note that even for environments that DO offer support for variable fonts, they need to support arbitrary axes, as Fill is not one of the four official axes in the OpenType specification.

Of course CSS does support arbitrary axes, with "font-variation-settings". When using this, one uses the four-letter codes for each axis, like this:

font-variation-settings:
  "wght" 375,
  "GRAD" 50;
  "FILL: 100;