My Custom icons converted in some Chinese language

[shaheem-khanzada]

[pram11]

same for me.
in my case, i updated react-native recently from 59.x to 61.5 and after having some hard times managing other components, succeed to build app but, it shows chinese languages.
yarn remove/add vector icons did same.

i used almost every icons by fontawesome5 , so I'm not sure about other fonts went wrong too.
vector icon version 6.6.0

[pram11]

I just canceled edit font file in android/app/src/main/assets/fonts and it did work. seems like fontfile was broken

[LucasKeiti28]

Try this:

1: In file: android/app/build.gradle
2: Add: <apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"> in the end of the code.

[ctopher7]

Copy the contents in the node_modules/react-native-vector-icons/Fonts folder to android/app/src/main/assets/fonts (create the folders if you dont have them)

100% works, it works for me

[armata99]

@ctopher7 Yup, this works for me. I was getting disappointed, many thanks.

[LeviWilliams]

+1 to show that this issue is still happening. Only on Android and on certain devices for us - for the most part foreign devices but there is no consistent pattern of specific devices. For the most part seems like a completely random issue.

[gfmoore]

Happening for me on a Samsung tab s6 ???

Edit: npm remove react-native-vector icons and then yarn add react-native-vector-icons worked!!!!

[AtanasChachev]

I may be a bit late, but we did experience that on all devices on Android (implementing custom icon font with Icomoon). Initially our setup for the icon was

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import iconMoonConfig from '@src/selection.json';

export const CustomIcon = createIconSetFromIcoMoon(iconMoonConfig);

^^^ This way, the icons were working on iOS but on Android we experienced the Chinese symbols thing.

After changing

export const CustomIcon = createIconSetFromIcoMoon(iconMoonConfig);

to

export const CustomIcon = createIconSetFromIcoMoon(
  iconMoonConfig,
  'Icomoon',
  'Icomoon.ttf',
);

The icons are now working on both devices. Take into consideration that our font is with capital letter ('Icomoon.ttf') in the android / iOS assets / resources folders.

[burhanrepos]

THis work for me ,

step1: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" ( add this line to android/app/build.gradle)

step2: ( add these two line in android/settings.gradle )
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

step3: ( add this line to android/app/build.gradle) under dependencies
dependencies {
compile project(':react-native-vector-icons')
}

[AnthonyMwangi]

+1 to the response by @AtanasChachev in solving the issue for createIconSetFromIcoMoon

Make sure the font file is in the fonts folder: android\app\src\main\assets\fonts\icon_moon.ttf

import icoMoonConfig from './config.json';

export const RawIcon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'Enter_Icon_Name_Here',
  'icon_moon.ttf'
);

[studioilgranello]

Response by @AtanasChachev is perfect and helped me solving this same issue i was having on Android.

import icoMoonConfig from './selection.json';

export const RawIcon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'icomoon', // <- i think it's the default icon set name icomoon gives. Check font file with LibroFont app to check
  'CustomIcons.ttf'  // <- replace with your font file name
);

[cetinozgur]

Try this:

1: In file: android/app/build.gradle 2: Add: <apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"> in the end of the code.

Copy the contents in the node_modules/react-native-vector-icons/Fonts folder to android/app/src/main/assets/fonts (create the folders if you dont have them)

100% works, it works for me

100% indeed.. THANKS!

[poonamdhomane]

Copy the contents in the node_modules/react-native-vector-icons/Fonts folder to android/app/src/main/assets/fonts (create the folders if you dont have them)

100% works, it works for me

yes it worked

[iamshrikantjha]

Copy the contents in the node_modules/react-native-vector-icons/Fonts folder to android/app/src/main/assets/fonts (create the folders if you dont have them)

100% works, it works for me

I ran the npx react-native-asset after copying the items to the respective folder. And it worked.

[Witillan]

Try this:

1: In file: android/app/build.gradle 2: Add: <apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"> in the end of the code.

It worked after accessing the "android" folder and running "gradlew clean".

[PritamGhosh190]

Same happens with me..
this basically happens when you import an icon and it didn't get it properly...

The best solution is :
Add: <apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"> in the end of the code.
and restart the build.......

[doublesam20]

Copy the contents in the node_modules/react-native-vector-icons/Fonts folder to android/app/src/main/assets/fonts (create the folders if you dont have them)

100% works, it works for me

Thanks mate

[AmberSaxena0]

Try this:

1: In file: android/app/build.gradle 2: Add: <apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"> in the end of the code.

try this but still getting same icon in chines, no update