react native vector icons shows X instead of icon - react-native

Question

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?

Answer 1

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

Answer 2

You forgot to load your icon...
put this after your import:
import Icon from 'react-native-vector-icons/AntDesign';
Icon.loadFont();
Cheers!

Answer 3

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
};