Fonts other than material don't work for Icons.

[Evan G]

Hi, thanks for your hard work on this library! it's a great lib.

Ran into an issue with fonts and icons.

I downloaded your example app, and was able to get your icons working using by copying your material.tff file and putting into my project.

example:

<IconWidget size={20} font="material" icon="snowing" />

Works great.

I downloaded MaterialCommunityIcons.ttf, (from here: https://github.com/oblador/react-native-vector-icons/blob/master/Fonts/MaterialCommunityIcons.ttf) and put it in the same directory that the material.ttf is in, and it doesn't work.

        <IconWidget
          size={20}
          font="MaterialCommunityIcons"
          icon="weather-snowy"
        />

just returns

I've tried other fonts too, I can't seem to get any to work beside your material.tff file.

[Stefan Aleksovski]

Are you using expo or bare react native?

If not using expo, you need to rebuild the app so that the ttf file will be in the apk.
If using expo, you need to use the config plugin to copy the font file.

BTW, in the example app there are material, material_outlined, and Ndot-55 fonts.

[Evan G]

Hi

Sorry for the super late reply!

I'm using expo, using expo prebuild to compile the .ttf files into the android folder. The compiling works fine, everything seems good.

The config plugin:

the Icon code:

the widget:

material works just fine though.
material example:

I'm making a weather app, if you are curious. :)

[Stefan Aleksovski]

I tried it now, and yes, I could not use the MaterialCommunityIcons font.
I tried rebuilding the app, renaming the existing material font to something else to make sure it is compiling correctly.

I still don't know why the font is not loaded properly, but will investigate more...

[Stefan Aleksovski]

Hi,

I tried again, and looks like that the MaterialCommunityIcons font cannot be used the same way as the material font.
The font does not map from the text to the icon.

I looked at how react-native-vector-icons works, and I saw that they are using a code for the icon. See https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialCommunityIcons.json#L6451

This works:

<IconWidget
  style={{ color: isActive ? '#5CC6E2' : '#254B58' }}
  font="MaterialCommunityIcons"
  size={32}
  icon="&#984472;"
/>

You can find other code points for the same font from there.
I'll close this since it is not an issue with the library, just the font needs to be used in a different way.

[Evan G]

Thank you!!