React-native-vector-icons: Icons displaying as crossed out box on Android

[chrisbianca]

I started using react-native-vector-icons v1.0.0 yesterday with RN v0.16.0 and have everything working perfectly with iOS. However, when I went to check the Android equivalent this morning, it seems all the icons are displaying as a outlined box with a cross through the middle of it.

I'm using MaterialIcons but tested FontAwesome as well to make sure it wasn't just an issue with the one font.

I've copied all the fonts files into android/app/src/main/assets/fonts and also set up the getImageSource support just to check that didn't help. I didn't previously have an assets folder so needed to create it.

My guess is that for whatever reason the fonts aren't getting bundled correctly as the same happens when the font files don't exist in the fonts directory.

Any ideas? Is there something that might need to change in one of the build files to correctly pick up the assets/fonts directory?

[oblador]

Hi @chrisbianca,

Make sure the fonts folder is all lowercase. Does the example project work for you?

[chrisbianca]

Hi @oblador,

The fonts folder is all lowercase. The font files themselves don't need to be lowercase do they?

I just checked out the project and tried Examples/IconExplorer project as this seems to be the only one with Android support:

npm install
react-native run-android

But there is an error on startup as below:

However, having had a look at the folders that are output from the build for IconExplorer. The fonts folder exists in /android/app/build/intermediates/assets/debug for IconExplorer but doesn't for my application.

Clearly something is missing from the build process and it's not copying the fonts folder over. I've had a look at the config files for my application against IconExplorer but can't see any obvious differences.

[oblador]

@chrisbianca: You're getting the red screen because the packager is still running for your old project. You need to kill it before launching the IconExplorer. But it seems you've done everything right but the android build process somehow is not copying the fonts due to caching I'm guessing. Try deleting the build folder and run it again :-)

[chrisbianca]

You're very right, I've deleted the build folder and it works! Sorry for wasting your time!!

[oblador]

I've added a troubleshooting section to the readme :+1:

[chrisbianca]

Nice, thanks! :)

[kwokster10]

Hi,
I'm having a similar issue. I did all the steps @chrisbianca had mentioned. I followed the instructions under the troubleshooting section several times but am still getting the crossed out box. I'm am running react-native 0.18.1 and am trying to get Ionicons icons to show up for Android using Inline. They already work for iOS. Thoughts?
Thanks.

[getreup]

Try swapping the F for f in fonts. Or vice versa.

[kwokster10]

Hi @KelseyRegan, I changed the folder name from 'fonts' to 'Fonts', deleted the 'build' folder, recompiled and still got the same crossed out box.

[kwokster10]

@KelseyRegan, I figured it out. I was passing styles to the icons from my stylesheet like <Icon name='map' style={styles.icon} />. Placing the styles inline like so <Icon name='map' size={30} color="white" /> resolved the crossed out box. Thanks for responding.

[getreup]

@kwokster10 awesome :)

[oblador]

@kwokster10: It might be related to this issue: https://github.com/oblador/react-native-vector-icons/issues/104

[kwokster10]

@oblador I didn't use fontWeight but if added the prop and played around with its value, it didn't seem to change the appearance of the icons at all. Thanks for looking into it.

[Pyrolistical]

My issue was I forgot to copy the font file to assets/fonts and the [X] got cached.

I proved it by changing com.oblador.vectoricons.VectorIconsModule and changing cacheFile.exists() to false

[pinchez254]

make sure you have linked the vector icons after installing them `

$ react-native link react-native-vector-icons Then make sure you stop your packager and recompile the app again $ react-native run-android now the icons should show up. The icons are not usually loaded up after installing and linking, you must recompile the app again.