opened
amang8662
username_0
I am using react native 0.52 and react-native-vector-icon 4.5.0 on Android device . I tried to display icons on my screen but It isn't showing me any icon but a X box icon every time. I even tried other keys but still no solution. I also ran command react-native link.
My `android/app/src/main/assets/fonts` contains all the fonts.

`import Icon from 'react-native-vector-icons/FontAwesome';
 ... return <Icon name='rocket' size={30} color='#900' /> `

![screenshot_20180221-183851](https://user-images.githubusercontent.com/24224603/36590346-5d205a62-18b4-11e8-9fb9-5b3258f493cd.png)
Icons are not showing up
issue
created
MoOx
username_1
Did you re-run-android? Otherwise fonts are not in the bundle, which lead to this problem...
comment
created
amang8662
username_0
Yeah I deleted old build files and re-run android
comment
created
PeterKottas
username_2
+1 on this. I encountered pretty much the same problem on 
"react-native": "0.53.3"
and
"react-native-vector-icons": "4.5.0"
comment
created
PeterKottas
username_2
Ok this is weird, it apparently got linked twice ... I had to manually fix some stuff and then clean and rebuild the project. Works for me now though.
comment
created
amang8662
username_0
@username_2 how did you fix it?
comment
created
PeterKottas
username_2
I searched the whole solution for react-native-vector-icons (without dashes as well) and found a few places where it was added twice. Not sure how that happened. Some problem with linking I assume
comment
created
MoOx
username_1
See https://github.com/oblador/react-native-vector-icons#android
Please reopen if you have a way to reproduce in a project we can see.
comment
closed
MoOx
username_1
issue
created
amang8662
username_0
Finally started working. I had to re-run the app once using USB cable rather than on wifi.
comment
created
Hideer
username_3
@username_0  I have the same problem. can you help me ?!
comment
created
amang8662
username_0
@username_3 sorry for the delay. Exactly What problem are you facing??
comment
created
MiguelApp
username_4
I solved my issue adding on /app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then I uninstall the app from my phone and reinstall again.
comment
created
flodu25
username_5
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 👍👍👍 is found
comment
created
hanssonfredrik
username_6
@hpelitebook745G2 try to relink it with react-native link react-native-vector-icons, it worked for me.
comment
created
suprabhasupi
username_7
For IOS there are two steps:-
1.  Drag the folder Fonts from "node_modules/react-native-vector-icons"  and paste it into Xcode project root also make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.

2. Edit Info.plist(which is under <PROJECT NAME>) and add a property called **Fonts provided by application**  and type in the files you just added. (in items column )
E.g:- Ionicons.ttf
comment
created
radjivF
username_8
I cannot make the icomoon generated icon on android too, Im starting to get depressed
comment
created
dklt
username_9
Confirming there are _**duplicate .ttf in XCode project**_, causing some icon not displaying... Suprabhasupi suggestion helps fixed my problem for iOS
comment
created
ergb
username_10
Update gradle in android... it will works..
comment
created
ergb
username_10
After update use MaterialIcon.. It works for me.. Do 1 more thing.. Open project in android studio.. Then check if any error is there.. If not then try to build and check
comment
created
radjivF
username_8
@username_10 Im using customIcon with Icomoon not material :'(
comment
created
webdevfarhan
username_11
In my case there was no problem, i didn't read the documentation properly and thought that it will work like <Icon name="newIconName"></Icon> but it is mentioned that to use icons we need to do like this : ```
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)
```
comment
created
atultiwari1996
username_12
I solve issue using   apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"  this line paste into android/app/build.gradle(app). then re-run android.
comment
created
dennisschneider
username_13
`apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" `
somehow did not work for me ...  I copied the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder) manually.
comment
created
bbb159
username_14
After following all the instruction in the github the icons was still like a box. I solved the problem by executing react-native link.
comment
created
deepakaggarwal7
username_15
The recommended approach is to use the gradle way.

I followed the steps as mentioned:
1) installed npm with --save
2) copied the **_apply from_** line in android/build.gradle
3) Used it by referencing

It showed me a [X] icon for Android (iOS works fine).

Then I tried **react-native link** command. It solves the issue but it contradicts the recommendation itself. What it does is, it copies the font in the asset folder. But isn't that what document says as less preferred option (so that npm updates ensure font in sync).

Infact, at the bottom, the solution to solve [X] problem mentioned is to copy the font manually.

Q. Why does **apply from** works for some anod not for others?
comment
created
anvt96
username_16
I still have [X] icon for Android. I using   <FontAwesome style={{fontSize: 20, color: "white"}}>{Icons.envelope}</FontAwesome> but not working. I import FontAwesome, {Icons} from react-native-fontawesome. Give me solutions :(((((
comment
created
webdevfarhan
username_11
Check if you are missing anything : 
check install instructions. Then use it like this :
import EntypoIcon from 'react-native-vector-icons/Entypo';
Similarly import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
const FacebookIcon = <EntypoIcon name="facebook" size={30} color="#3B5998" />;
then in render method use it like this : {FacebookIcon}
comment
created
anvt96
username_16
I can't change code, that's code of company, just solution is add library or fonts :( so I can't do that. If possible, you can using teamview with me
comment
created
webdevfarhan
username_11
Sorry mate, i am also working so i can help you with teamviewer, if you cannot change code then i suggest you to create a new react native project and try to make those icons work there then you will understand the problem and its solution.
comment
created
Symyon
username_17
In my case what helped is setting Minify flag in Android for "false":
<img width="1046" alt="screen shot 2018-11-30 at 11 14 03 am" src="https://user-images.githubusercontent.com/1674549/49300846-3fa4cb80-f491-11e8-8f9c-9e33e7c88968.png">
comment
created
rfenzo
username_18
You saved my day, thank you!
comment
created
iksent
username_19
For some reason ```apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"``` didn't work for me, but copying font manually worked...
comment
created
chrisbianca
username_20
Just submitted #923 to fix this issue
comment
created
german970814
username_21
Icons are not showing when using icomoon :(
comment
created
emmaroland32
username_22
Icon are not showing when using drawer Icon,

static navigatonOptions = {

      drawerIcon: ({tintColor}) => (
          <Icon name="home" style={{fontSize:24, color: tintColor}} />
        )

  }
comment
created
Roshwin
username_23
@username_1 thanks, this worked for me.

![image](https://user-images.githubusercontent.com/22616444/54498085-1e1a0380-490b-11e9-9fa1-43d18edd480c.png)
comment
created
martnst
username_24
fixed for me: `yarn upgrade react-native-vector-icons`
comment
created
YajanaRao
username_25
How to use react native vector icons without linking in react native 0.60. I Installed version 6.6.0 and executed without linking but Icons did not show up.
comment
created
tomchomiak
username_26
At this moment, auto linking for react-native-vector-icons in react native 0.60 isn't working. You can move the fonts manually or here's another solution that worked for me:

1.) Uninstall react-native-vector-icons using npm or yarn
```bash
npm uninstall react-native-vector-icons --save
```
2.) cd into your ios folder and rerun pod install
```bash
cd ios
pod install
cd ../
```
3.) Reinstall react-native-vector-icons using npm or yarn and link the icons manually
```bash
npm install react-native-vector-icons --save
react-native link react-native-vector-icons
```
4.) Restart your simulators for good measure and rerun your app
```bash
react-native run-ios
react-native run-android
```
comment
created
anfalch6
username_27
|Thankyou @username_14  it worked.
comment
created
nadernt
username_28
https://github.com/expo/vector-icons/issues/89#issuecomment-475217923
comment
created
Deboracgs
username_29
It's works in "react-native": "0.61.2"
comment
created
eugenioduarte
username_30
worked for me doing:
react-native link react-native-vector-icons
comment
created
orsospatrick
username_31
Thanks,  WORKED FOR ME.
comment
created
aqeebimtiaz
username_32
This worked for me, Unlinked & then Linked the package again.
comment
created
diogopereira5
username_33
worked this:
react-native link react-native-vector-icons
comment
created
haratmalli
username_34
`yarn remove react-native-vector-icons`
then in android/app/build.gradle add code below code
`apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");`
above other 'apply' line code
and then reinstall app by using USB.
comment
created
beniman8
username_35
This worked for me, thanks
comment
created
sonivipul89
username_36
it work's for me also
comment
created
zhnedyalkow
username_37
Hi,

The proposed solution above works for me for react-native 0.61+ on Android device here are the steps:

1. npm install react-native-vector-icons --save-dev
2. import Icon from 'react-native-vector-icons/Ionicons'; in App.js
3. Paste below line
`        <Icon
            name="md-menu"
            size={30}
          />`

somewhere in your code
4. Open dir "android/app/build.gradle" -> Paste following line somewhere in your file:  apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");
5 npm run android

Br,
Zhi
comment
created
VidyaCKabber
username_38
Once after installing the module, link it to the project.

react-native link react-native-vector-icons
comment
created
zhitomir-oreshenski-mm
username_39
Hi,

There isn't necessary to link the library because of the new version.

Br,
Zhi
comment
created
VidyaCKabber
username_38
Yes. You need to. Even I am using the new version only. I faced the same issue. By linking the module to the project, the issue got resolved.
comment
created
marvinIsSacul
username_40
Hi,

I'm using react-native version `0.61.5`, and yet I found that running `react-native link react-native-vector-icons` **sovles** the problem.
comment
created
cyb3rsalih
username_41
add `apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");`
bottom of the android/app/build.gradle . No need to delete the package. Only clean build and run.
comment
created
augini
username_42
This worked for me but make sure to rerun your simulator or phone after doing that. Thank ya all !!!
comment
created
Pei116
username_43
I have a similar issue in RN v0.61.5 & react-native-vector-icons v6.6.0.
comment
created
gie3d
username_44
In my case, I found that the icon didn't show up when I reference it (using import) that reference to node_modules folder like:

`import Ionicons from 'react-native-vector-icons/Ionicons';`

however it did work when I reference it using relative path.

`import Ionicons from '../node_modules/react-native-vector-icons/Ionicons';`
comment
created
Pei116
username_43
Finally got it working properly by setting `org.gradle.configureondemand=false` in `gradle.properties` of my android project.
It's because `font.gradle` doesn't work properly with configuration on demand in gradle.
The problem is described in [here](https://github.com/gradle/gradle/issues/9489#issuecomment-604412046)
comment
created
sunny-sk
username_45
finally i solved the this icon problem steps: are given below
make sure you ran the command "npm i react-native-vector-icons"

paste  the below line inside your android/app/build.gradle
**apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"**

create a file with the name of "react-native.config.js" into your project root folder and add the following lines in it and save
**module.exports = {
  assets: ['./assets/fonts/'],
};**
comment
created
cerqs
username_46
Resolvi seguindo o método:

Adicionar no final do arquivo \android\app\build.gradle

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

rodar novamente o simulador
comment
created
sanjeevdev007
username_47
i am simply hit yarn react-native link.... and restart the project..after that it's working
comment
created
linconkusunoki
username_48
I was trying to add a new font from Icomoon and the new icons are not appearing, to solve this I run `.\gradlew clean` inside the `android` folder and re-run the project with `npx react-native run-android` and it works :D
comment
created
kckunal2612
username_49
For me, some FontAwesome5Pro icons are showing up, and some aren't. 
And even after uninstalling, re-installing, re-linking, modifying build.gradle file, Icons just don't show up. I know the icon name that I am passing is correct because for other icons I get a YellowBox warning.
comment
created
Emehado
username_50
react-native link and rerun android worked for me
comment
created
jaswantdhayalxebia
username_51
This is the right answer, Thanks a ton
comment
created
AdeelShoukatAli
username_52
That worked for me using 0.61.4
comment
created
anirban-hazra
username_53
Thanks for this solution.
comment
created
hackrx
username_54
I have also faced this problem, this is how I solved this 
```
npm cache clean --force
cd android & gradlew clean
``` 
then 
`yarn react-native link`
Then again restart your app, make sure uninstall the app.
Also make sure you have added `apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" ` in `app/build.gradle ` file.
comment
created
NamanPanchal
username_55
it also worked for me .Thanks
comment
created
NamanPanchal
username_55
Yes it worked.Thanks
comment
created
muhammadtaha1998
username_56
The react-native-vector-icon isn't linking automatically. You have to link it manually by running the following command.
`react-native link react-native-vector-icons`
After doing this my icons started showing.
comment
created
Dheyson
username_57
@username_56 is it a current issue from the repo, or from your project? Yesterday, I re-run my app with the vector-icons, that was working normaly with it. However, when I run it today again, the icons just disappear. I did not re-run and auto-link yet, just to be sure. If it was something around the repo. Could someone answer this?
comment
created
hackrx
username_54
You can try one thing delete node modules folder then again run ` npm install `  and `react-native link` and please refer [link](https://github.com/oblador/react-native-vector-icons/issues/661#issuecomment-657327396).
I hope this will help you
comment
created
iaurg
username_58
Edit `android/app/build.gradle` ( NOT android/build.gradle ) and add the following:
```
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```

Then run:
```bash
npx react-native link react-native-vector-icons
yarn run android
```

This worked for me, even the documentation telling to not use react-native link.
comment
created
xlcrr
username_59
In my case, MaterialIcons.ttf was missing from `android/app/src/main/assets/fonts/`
comment
created
iAmShakil
username_60
This worked for me
comment
created
prajna-h
username_61
react-native link react-native-vector-icons
Though I am using react 0.63.1, Manually linking a library worked for me
comment
created
Belgin-Android
username_62
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"  This Worked Perfectly
comment
created
dragma
username_63
Same for me. Even two years later, with RN v 0.61 & rnvi v7.1.0
Had to execute `cp node_modules/react-native-vector-icons/Fonts/* android/app/src/main/assets/fonts/` to make it run.
:crying_cat_face: 

I have to say that this happened after I removed `react-native-maps` from my dependencies. Maybe this is not linked at all either.
comment
created
fabiocberg
username_64
I tried all replies. Only this one worked for me.
comment
created
mateusSchwade
username_65
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"  it worked
comment
created
aftabaminzoobiapps
username_66
the app was working perfe3ct. after running the command gradlew clean. now icons are not working. I did the following

delete the node modules.
restart the system. uninstall the app. 
npm cache clean
nothing worked.
comment
created
export-mike
username_67
@username_63 same here I have to copy the files manually, I have updated my android/app/build.gradle and added

```
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
to the bottom
comment
created
abhinav-vk-gupta
username_68
This one worked perfectly for me! Thanks.
comment
created
95Rawan
username_69
This worked for me 💃💃💃

Thank you so much for this note "Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following". I kept searching for the file and couldn't find it until I was your note, because there are two of them.  Thank you, much appreciated 🙌
comment
created
hotheadhacker
username_70
Worked for me! Thanks
comment
created
Ulkeshwani
username_71
Manual Installation Worked For Me ❤❤
comment
created
anabeatrizzz
username_72
@username_8 I'm trying to link Icomoon too. You resolved this issue?
comment
created
olalerephillip
username_73
thanks. it worked for me
comment
created
vigamage
username_74
I had to uninstall the app from the device and reinstall to fix this issue
comment
created
Bigrev
username_75
I recently ejected from expo and i was facing this issue, but thankfully this worked for me!
comment
created
frankbolviken
username_76
Why this is still a thing in 2022 completely baffles me.
comment