React-native-vector-icons: Icons Missing for Android

[gregorygmwhite]

React Native Version: 0.29

Added the necessary lines of code manually to the different android files as per the README's instructions.

Tried both Ionicons and FontAwesome for an info circle icon. (double checked spelling a few times as well)

I have tried to gradlew clean and rebuilt multiple times and when I load up the app, there's a little gray X instead of my icon.

I have a feeling this is either a stupid mistake or a deep issue with linking this repo to an android project.

[robinschaaf]

I had to put the FontAwesome.ttf into android/app/src/main/assets/fonts/ directory to get it to work
HTH

[yellowbang]

same problem... i add FontAwesome.ttf into android/app/src/main/assets/fonts/, but not working.

[codyhazelwood]

+1 I have the same issue. Tested on RN 0.27 and RN 0.28, and then I started a blank RN 0.35 project and still no luck. Works fine on iOS. Also checked to make sure fonts were copies to assets/fonts folder.

[weixingsun]

if your android refused to work even you replaced the ttf files, pls check the package.json
try to compile your module again by using the commands according to "build-fontawesome" or your specific fonts

[codyhazelwood]

My issue is fixed. Turns out there there was a style with fontWeight: 'bold' on my <Icon>. Stupid mistake, but easy to overlook.

[creativefull]

up

[oblador]

The fontWeight bug should be fixed in 3.0.0 @creativefull

[creativefull]

@oblador : still not working :(

[getreup]

+1

[ljspace]

same problem，Who solved it?

[oblador]

@ljspace Have you followed the steps here: https://github.com/oblador/react-native-vector-icons#the-icons-show-up-as-a-crossed-out-box-on-android

Also if you have used react-native link please try manual or gradle way instead.

[Duan112358]

@oblador problem still exists for custom fonts (here, I use icomoon ), while build-in icon sets work normally.

import React from 'react'
import { createIconSetFromIcoMoon } from 'react-native-vector-icons'
import icoMoonConfig from './icomoon.json'
import FontAwesome from 'react-native-vector-icons/FontAwesome'

const TYPES = {
  piaofang: createIconSetFromIcoMoon(icoMoonConfig),
  fontawesome: FontAwesome,
}

 export default props => {
  const { source='piaofang', ...others } = props

  const Icon = TYPES[source.toLowerCase()] || TYPES['piaofang']

  return <Icon {...others}/>
}

help wanted!

[rezof]

+1 getting crossed out box only on icoMoon

[pdoggi]

I was getting this problem 72 hours ago. I killed the app in Android simulator and restarted it. Fixed my problem. Don't know why. 🤔

[Seeingu]

I tried the manual way, and cleaned the gradlew cd android/ && ./gradlew clean, rerun react-native run-android. It works for me. Hope it help you too. 😀

[Duan112358]

@pdoggi 😂 😂 😂
@Seeingu I try as you described, problem still exists 😞 .

Finally, I fixed it by added another param icomoon to createIconSetFromIcoMoon, and it should be its default params @oblador .

But previous solution will caused unrecognized font family in IOS, and I changed as following

Tnks Guys!

[Pustelto]

@Duan112358 your solution work for me as well thanks. I have spent few hours trying to make icons visible on Android.

[jeffmwells]

@Duan112358 I had to add the third parameter too, as the font-family name did not match the file name.

[oblador]

This seems to be solved, closing 👍

[VoNam]

thanks @Duan112358 , it works like a charm

[oly07]

That you guys, creating the assets/font folder fixed it for me... you helped big time.. :-D

[henkkasoft]

I updated my icomoon custom icons but the new icons didn't show. This helped me (thanks to all here):
I added icomoon.ttf to \android\app\src\main\assets\fonts and restarted simulator & run gradlew clean in \android folder.

[diogofos]

I solved it by executing the command below:
react-native link

[rahulkmurali]

Same issue: Icons displays as square box in android emulator
import Icon from 'react-native-vector-icons/FontAwesome';

< Icon name="rocket" size={30} color="#900" />

All fonts are in the assets folder inside "fonts".

Please help.

[radjivF]

Same problem here :'(

[Prajjwal98]

I was getting the same crossed box instead of icons. Run the command react-native link react-native-vector-icons and run the app again. It worked for me pretty well.