React-native-vector-icons: Problem with custom fonts

[damathryx]

I got a problem with updating my icons. I'm using icomoon.
I update my icons by creating another project in icomoon app and overwrite the select.json and icomoon.tff in react-native-vector-icons. But the icons gets pretty messy. I mean when i call a certain icon different icon appears. Any idea whats causing this? Or how to fix?

[oblador]

Is this happening on iOS or Android? Did you clean build intermediates and rebuild?

[damathryx]

It's happening in Android. I've run react-native run-android again if thats what you mean.

[oblador]

You need to empty android/app/build too and make sure you've updated the font in android/app/src/main/assets/fonts.

[damathryx]

@oblador thanks!

[alexprice1]

I think I am having a similar issue. My icomoon icons are showing up on ios but not on android at all. Any advice?

[alexprice1]

For some context:

Under android/app/src/build.gradle I have:

...

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

...

compile project(':react-native-vector-icons')

Under android/settings.gradle I have:

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Under android/app/src/main/assets/fonts I have:

- Entypo.ttf
- EvilIcons.ttf
- FontAwesome.ttf
- Foundation.ttf
- Icomoon.ttf
- Ionicons.ttf
- MaterialIcons.ttf
- Octicons.ttf
- Zocial.ttf

[alexprice1]

@oblador no updated on here in a while? This is one of 2 things preventing me from doing an Android release.

Any help is appreciated!

[oblador]

Not at all as in blank or crossed out boxes? I'd suggest you compare your project with the example project and try to find any differences.

[alexprice1]

@oblador thank you for your reply.

I am having no issues with built-in fonts and only an issue with custom fonts (from icomoon). For my custom fonts I just see them as "blank".

I was able to setup IconExplorer, but that doesn't have an example of how to use a custom font for Android.

[alexprice1]

@oblador spent a lot more time on this last night. After reading up on how to add custom fonts to Android in general, I realized that it was expecting my file to be lowercase, so I renamed it from Icomoon.ttf to icomoon.ttf. This worked on the emulator.

When I tried running it on my phone, it still does not work.

[alexprice1]

:-(

[albertoaa]

Is there any update on this issue I'm having the same problem on my app

[dunhuang]

maybe you can try buildfont
easy to get ttf and map.json from svg icons

import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from './iconfont.json';

const iconSet = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf');

export default iconSet;

[idlework]

Make sure the file name of your font is the same as the fontFamily in the json file. For example: in my json file named my-font.json at the bottom I have the entry: "fontFamily": "my-font". Renaming my ttf to my-font.ttf makes sure the Android buildprocess can match the font with the fontFamily.

[peacechen]

Thank you @idlework
I was scratching my head for hours trying to get custom fonts working in Android. Some posts mentioned a filename of "Icomoon.ttf", but the fontFamily in my generated json was "icomoon" (lowercase).

@oblador It would be beneficial for others to mention this in the Readme. The docs are a bit ambiguous about the filename.

[Fi2zz]

@idlework your solution works for me