react-native-vector-icons: Icon not not loaded on Android App

screenshot from 2016-06-12 01 12 34

  "dependencies": {
    "@remobile/react-native-splashscreen": "^1.0.3",
    "alt": "^0.18.4",
    "native-base": "^0.3.1",
    "react": "^0.14.8",
    "react-native": "^0.25.1",
    "react-native-action-button": "^1.1.5",
    "react-native-android-statusbar": "^0.1.2",
    "react-native-icons": "^0.7.1",
    "react-native-material-design": "https://github.com/react-native-material-design/react-native-material-design-styles.git",
    "react-native-material-design-styles": "^0.2.6",
    "react-native-navigation-bar": "^0.1.10",
    "react-native-scrollable-tab-view": "^0.4.3",
    "react-native-vector-icons": "^2.0.3"
  },

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 20 (2 by maintainers)

Most upvoted comments

I also tried the troubleshooting instructions below to no avail…

+21

rgoldiez on Jul 22, 2016

Even I faced the same issue. I tried restarting whole application and it worked. Try: react-native run-android This will actually download some packages for react-native-vector-icons while building up, then npm start .

+16

sourabhdattawad on Jul 30, 2016

Somehow, someway, doing react-native run-android made the icons work!? I had been running from Android Studio.

rgoldiez on Jul 25, 2016

I’m having this issue as well. RN 0.28, and react-native-vector-icons 2.0.1

Workings on iOS. I ran rnpm link and get the following output but I still get the X like the OP. Screenshot below.

$ rnpm link react-native-vector-icons
rnpm-link info Android module react-native-vector-icons is already linked 
rnpm-link info Linking react-native-vector-icons ios dependency 
rnpm-link info iOS module react-native-vector-icons has been successfully linked 
rnpm-link info Linking assets to ios project 
rnpm-link WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you.
rnpm-link info Linking assets to android project 
rnpm-link info Assets has been successfully linked to your project

rgoldiez on Jul 22, 2016

When I upgraded native-base from 2.13.13 to 2.15.2, this issue happened, I follow below steps to resolve it:

edit android/app/build.gradle file, add below content:

project.ext.vectoricons = [
    iconFontNames: [ 'FontAwesome.ttf', 'AntDesign.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

copy above font files from node_modules/react-native-vector-icon/Fonts to android/app/src/main/assets/fonts/
react-native run-android

wangxinxuan on Jan 11, 2021

If the project is already open in android studio emulator and you imported the ICONS, then you will have to close the app and re-run react-native run-android for your icons to be displayed.

wrongakram on Jan 2, 2018

I am using FontAwesome, but Android still have [X] Icon. I import FontAwesome, { Icons } from ‘react-native-fontawesome’; and my code is <FontAwesome style={{fontSize: 20, color: “white”}}>{Icons.envelope}</FontAwesome>, but not working. Give me the way to troubleshoot 😦(

anvt96 on Nov 30, 2018

another way: if you ues android studio, do copy fonts to android/app/assets install of android/app/src/main/assets. link post

wikieswan on Oct 19, 2018

you have to rnpm link (that will link all dependencies, including this library)

otherwise if you only want a particular one, you can rnpm link <name>

281330 on Jun 12, 2016