CODEWITHSUNDEEP
react-native
user14370561
user14370561

Reputation: 31

react native vector icons shows X instead of icon

I've tried different icons, however it seems all of them just show an X instead of the actual icon. There aren't any error messages, here is the code I've used:

import Icon from 'react-native-vector-icons/AntDesign';

<Icon name="heart" size={30} color="red" />

In this case, it should show a heart, but it just appears with an X with a box around it.

This post seems to have a solution, but I do not understand what they did to fix it. react native vector icons showing X instead of icon

Anyone know how to solve this?

Upvotes: 1

Views: 6282

Answers (3)

Engr.Aftab Ufaq
Engr.Aftab Ufaq

Reputation: 6424

Here is a complete solution for this. copy the fonts folder from

node_modules\react-native-vector-icons\Fonts

to

android\app\src\main\assets\fonts

you can create the folder there it does not exist by default. then create a file in the root of your project

react-native.config.js and paste this code.

module.exports = {
    project: {
      ios: {},
      android: {}, // grouped into "project"
    },
    assets: ["./assets/fonts/"], // stays the same
  };

Upvotes: 0

Rajendran Nadar
Rajendran Nadar

Reputation: 5438

Found that you are using an Android emulator. In the past, I had the same issue many told me to link the project to solve the issue but RN v0.60 and above supports auto-linking, so it is not advised to use manual linking.

npx react-native link -- Avoid this for projects above RN v0.60

Automatic way to add fonts

Add this piece of code in android\app\build.gradle. I only want MaterialCommunityIcons.ttf if you want other font add them here it will be added automatically.

project.ext.vectoricons = [
    iconFontNames: ['MaterialCommunityIcons.ttf'] // Add fonts needed
]

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

This is a manual way (If automatic didn't work)

Step 1

Move the .ttf file from the node_modules\react-native-vector-icons\Fonts that you want to android\app\src\main\assets\fonts after that cd android and run ./gradlew clean or gradlew clean

Step 2

Add this line in android\app\build.gradle

project.ext.vectoricons = [
    iconFontNames: ['MaterialCommunityIcons.ttf', 'AnotherFont.ttf'] //name of all the fonts added from node_modules in step 1.
]

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

After that the icons will be visible. Try resetting the cache if it did not work yarn react-native start --reset-cache & yarn react-native run-android

https://github.com/oblador/react-native-vector-icons/issues/1117#issuecomment-589958315

Troubleshooting step from the library if still the above did not work you can try this.

https://github.com/oblador/react-native-vector-icons#the-icons-show-up-as-a-crossed-out-box-on-android

Upvotes: 5

user13423237
user13423237

Reputation:

You forgot to load your icon...

put this after your import:

import Icon from 'react-native-vector-icons/AntDesign';

Icon.loadFont();

Cheers!

Upvotes: 0

Related Questions