Unrecognized font family ionicons

Question

I followed the setup instructions in the NativeBase Docs and ran rnpm link. I am getting this error: Unrecognized font family ionicons

also checked by Xcode, the fonts are already in the build phase. What am I missing?

score 83 · Answer 1 · answered Sep 27 '19 at 11:05

For RN 0.60+ don't use react-native link ...! (see Autolinking)

Instead add this in your Podfile:

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

and run pod update (or pod install).

Furthermore add this in your Info.plist:

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
</array>

(took from https://github.com/oblador/react-native-vector-icons#option-with-cocoapods)

Works fine in my project with:

"react": "16.9.0",
"react-native": "0.61.1",
"native-base": "2.13.8" (react-native-vector-icons@6.6.0),

I have tried every other solution and this is the only one that worked for react-native 0.61.5 — Tosh Velaga, May 29 '20 at 08:40
This solved my problem after I have followed several answers and tutorials here on the internet, but although the application compile, all icons appear with a "?" In place of the image. You could tell me why this happens, if needed, I post a question with more detail. thankful @Eddy. — Armando Marques da S Sobrinho, Apr 03 '21 at 12:55

score 20 · Answer 2 · answered Mar 22 '17 at 04:37

20

Expanding on the exisiting answer and using the solution found on this github issue, do the following;

Close the running packager
Run react-native link react-native-vector-icons
Then run react-native start --reset-cache
Finally run react-native run-ios to restart the simulator

answered Mar 22 '17 at 04:37

Duncan

447
3
12

1

Also remove `node_modules` and run `npm install` before step 2 – Divyanshu Maithani Feb 15 '18 at 09:35
Closing the packager (running terminal) was my problem. – Nicolai Lissau Jan 03 '19 at 21:30

score 19 · Answer 3 · edited Jul 09 '21 at 23:03

19

Use the Icon.loadFont() method to load the fonts.

Example (Add your App.tsx):

import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Feather from 'react-native-vector-icons/Feather';

AntDesign.loadFont().then();
Ionicons.loadFont().then();
Feather.loadFont().then();

edited Jul 09 '21 at 23:03

Sergey Yarotskiy

4,536
2
19
27

answered Aug 17 '20 at 14:14

Anjali Aggarwal

611
4
8

4

This is the correct answer for people coming here in 2021. – Martin Calvert May 15 '21 at 20:45
This does not work for me. It results in the error `Possible Unhandled Promise Rejection: Error: Font failed to load` – Green Oct 06 '22 at 18:20
2023 this solution works – Buzzy Aug 21 '23 at 18:20

score 6 · Answer 4 · answered Oct 17 '20 at 13:56

if you are using 0.60 and above then you need to do the following step :-

<key>UIAppFonts</key>
<array>
 <string>AntDesign.ttf</string>
 <string>Entypo.ttf</string>
 <string>EvilIcons.ttf</string>
 <string>Feather.ttf</string>
 <string>FontAwesome.ttf</string>
 <string>FontAwesome5_Brands.ttf</string>
 <string>FontAwesome5_Regular.ttf</string>
 <string>FontAwesome5_Solid.ttf</string>
 <string>Foundation.ttf</string>
 <string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>

and after this run below command:-

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

After clean and build. Run the ios app. This solution work for me :)

score 2 · Answer 5 · answered Aug 05 '16 at 12:49

2

This happens if you start your packager and then link packages through rnpm link.

This requires you to restart your packager and try again.

answered Aug 05 '16 at 12:49

Supriya Kalghatgi

1,155
9
10

score 2 · Answer 6 · answered Oct 17 '20 at 14:15

Editing PodFile and adding pod RNVectorIcons not necessary because auto-linking will work fine after adding react-native-vector-icons

adding to PodFile will cause a warning after the next run with react-native run-ios:

Warning: following modules are linked manually: - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons"

Just add this line of codes to your info.plist that exist on ios/yourPorjectName/

find UIAppFonts and add codes inside :

        <string>AntDesign.ttf</string>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>FontAwesome5_Brands.ttf</string>
        <string>FontAwesome5_Regular.ttf</string>
        <string>FontAwesome5_Solid.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>Zocial.ttf</string>

worked with:

"react-native": "0.63.3",

"react-native-vector-icons": "^7.1.0"

score 1 · Answer 7 · answered Apr 03 '20 at 19:07

1

native-base has 'react-native-vector-icons' as dependency but if you are using react-native <=0.59.10 then you have link.

Just simple command :

react-native link react-native-vector-icons

answered Apr 03 '20 at 19:07

Khurshid Ansari

4,638
2
33
52

score 0 · Answer 8 · answered Jan 10 '18 at 18:40

0

I had same issue on my mac.solution :

Close the terminal window and simulator.
On the same folder which your project is situated write following.. React-native link react-native-vector-icons
then start the project by., React-native run-ios

answered Jan 10 '18 at 18:40

udit naik

1
1

score 0 · Answer 9 · answered Apr 16 '19 at 12:57

If your iOS project is using CocoaPods (contains Podfile) and linked library has podspec file, then react-native link will link the library using Podfile.

Add the comment below to the bottom of your podfile.

# Add new pods below this line

Then run "react-native link [package_name]"

This works for me.

score 0 · Answer 10 · answered Apr 08 '22 at 14:08

0

Works for me :

Put Ionicons.loadFont()
Close and reopen your application

answered Apr 08 '22 at 14:08

Spritrl

77
4

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/late-answers/31490067) – Barry Michael Doyle Apr 11 '22 at 08:58

Unrecognized font family ionicons

10 Answers10

Linked