Unrecognized font family Material Icons? #965

bhoomesh950 · 2019-03-14T10:06:32Z

I am new to React-Native, I have added react-native-vector-icons library manually to Xcode and Android studio. if run the code with Xcode its executing successfully without any issue. but if i trying to run the code from Terminal (react-native run-ios) its showing 'Unrecognized font family Material' in simulator. but the same this working if i runs the command (react-native run-android).

Please help me

oblador · 2019-03-18T21:50:46Z

Hi, your build is failing and launching a previously compiled (out of date) binary. It seems that you've drag-and-dropped files to your project that has since been deleted from this project instead of importing the project itself. Try to link this library again using the instructions in the readme.

pachun · 2019-04-22T23:14:09Z

@bhoomesh950 Make sure the font is linked and also make sure you're importing

import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"

Rather than

import MaterialCommunityIcons from "react-native-vector-icons/MaterialIcons"

Which my editor's (vim) autocomplete (coc) suggested.

(It actually suggested both, but I got the same error as you before getting linking setup (rerun react-native run-ios).

I hope I helped. If not, good luck!

SnehalAgrawal · 2019-08-16T11:41:31Z

After installation you need to link the library (After the updation of React Native 0.60, they have introduced autolinking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases).
After the linking just install the ios/pod file using pod install

You can follow Example to Use Vector Icons in React Native for the updated example of React Native 0.60

adjoaEdwin · 2019-10-16T23:49:56Z

After installation and linking the library, you need to check

Run script only when installing under [CP] Copy Pods Resources in Xcode under yourprojectname.

ghost · 2019-10-29T22:02:34Z

I had the same issue with Xcode: 11.1, react-native: 61.2 and react-native-sectioned-multi-select which depends on react-native-vector-icons

These steps solved the issue on my machine.

yarn add react-native-vector-icons install icons
yarn react-native link manual linking despite autolink is enabled
cd ios, pod install install fonts for ios
open <ios-project>.xcodeproj checkmark Run script only when installing just like @adjoaEdwin described it
cd ..
watchman watch-del-all, rm -rf node_modules, yarn install, rm -rf /tmp/metro-* clean-up
yarn ios run and confirm it's working

Note: I have no global installation of react-native and yarn doesn't require having "react-native": "react-native" in package.json. that's why yarn react-native link just works. <3 yarn

BatDroid · 2019-10-30T00:24:46Z

for me was the face that the fonts were not defined in the info.plist

Seishin · 2019-10-30T18:08:18Z

Encountered this issue today and spent an hour debugging it. My issue was resolved by checking the info.plist file and adding the fonts to the UIAppFonts array as they were missing in it:

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

lehmamic · 2019-10-31T17:58:17Z

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

Thanks, this helped me.

janhesters · 2019-11-05T09:46:50Z

@Seishin When I apply your fix, I can't start my app (try it with a fresh start aka. close simulator and terminal). I get the error described here:

https://react-native-elements.github.io/react-native-elements/docs/getting_started.html#step-2-install-react-native-vector-icons

And if I unlink the assets, the icons aren't found again.

AlexandreBonfim · 2019-11-12T20:39:30Z

@Seishin I really appreciate your help.... worked smooth !!!!!

manoelneto · 2019-11-20T15:06:29Z

@Seishin really helped me. Thanks!!!!

Jonathansoufer · 2019-11-22T10:53:46Z

Thanks @fibric, your step-by-step worked perfectly!

YeshanJay · 2020-01-22T12:43:18Z

Thank you @Seishin 😃

- Change to legacy build on Xcode - Copy AppDelegate.h and AppDelegate.m from native react-native project to remove unimodule - Add font to info.plist oblador/react-native-vector-icons#965 (comment)

naderghanbari · 2020-01-28T21:31:19Z

This should be in the docs (adding fonts to Info.plist) for people that rely on autolinking.

moazkh60 · 2020-02-07T07:09:31Z

In RN 0.60 no need for manual setup or even using the link command (using it would cause duplication errors and would make the errors even worse). The solution by @Seishin works perfectly in case of RN 0.60 and above. For some reason my array was empty in plist replacing it with @Seishin 's array worked.

nakulthebuilder · 2020-02-09T07:45:00Z

@janhesters I had the same issue as you and I wanted to confirm that once I unlinked and applied the solution suggested by @Seishin it all worked fine.

ChiwanAhn · 2020-02-10T17:23:23Z

If anyone has an issue even follow @Seishin 's solution,
please try react-native link or yarn react-native link

then, you can see those lines in the console.

info Linking assets to ios project warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you. info Linking assets to android project success Assets have been successfully linked to your project

davisbento · 2020-02-11T05:18:51Z

If anyone has an issue even follow @Seishin 's solution,
please try react-native link or yarn react-native link

then, you can see those lines in the console.

info Linking assets to ios project warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you. info Linking assets to android project success Assets have been successfully linked to your project

Worked fine for. I was getting error even following all others solutions.

But why need link in react-native > 0.60?

stanimirsp5 · 2020-04-12T20:22:36Z

My problem was that I didn't had folder 'Fonts' in xcodeproj, read here for more info.

jedsada-jed · 2020-04-21T05:40:02Z

Encountered this issue today and spent an hour debugging it. My issue was resolved by checking the info.plist file and adding the fonts to the UIAppFonts array as they were missing in it:

<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 then restart by run react-native start --reset-cache and reinstall.
It's work for me, Thank you @Seishin

xlcrr · 2020-04-25T18:56:27Z

After you add the file to info.plist and run pod install in the ios folder, open Xcode and add the file at Build Phases -> Copy Bundle Resources -> + New File -> MaterialIcons.ttf

aqeebimtiaz · 2020-06-12T15:55:25Z

After installation and linking the library, you need to check

Run script only when installing under [CP] Copy Pods Resources in Xcode under yourprojectname.

It worked perfectly!!!! Thank you so much! (Running Xcode 10.1 on High Sierra - 20 June 2020)

TommyLeong · 2020-07-25T13:30:58Z

Unbelievable troublesome to use this lib. Tried the all suggestions above, none work for me. End up I have to drag and drop the .tff file manually from node_module to xcode. Check the steps here

ShivamJoker · 2020-07-29T08:22:08Z

Encountered this issue today and spent an hour debugging it. My issue was resolved by checking the info.plist file and adding the fonts to the UIAppFonts array as they were missing in it:

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

this worked why this library hasnt fixed the auto linking we waste so much time doing this

weblancaster · 2020-08-01T07:21:26Z

@TommyLeong @ShivamJoker I agree its a pain to keep having this issue, I find myself here quite a bit too. BUT we can't forget that open source maintainers are doing this for free and it's our choice to use or not.

mhalesto · 2020-08-24T09:59:17Z

npx react-native link solved it for me RN 0.63.2

aleluis777 · 2020-09-15T06:07:11Z

UIAppFonts

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

Perfect!!!

paulo101977 · 2020-12-09T14:56:00Z

Encountered this issue today and spent an hour debugging it. My issue was resolved by checking the info.plist file and adding the fonts to the UIAppFonts array as they were missing in it:

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

This works perfectly! Thanks!!!!!!

(See: oblador/react-native-vector-icons#965) and installed @react-navigation depdendencies

@adjoaEdwin

- This commit might porentially cause build errors in future - Issue: oblador/react-native-vector-icons#965 - Had to do manual linking despite autolinking in newer versions of RN (autolinking does not work with react-native-vector-icons) - Checkmarked `Run script only when installing` just like @adjoaEdwin described in issue linked above

nphausg · 2021-03-29T06:28:01Z

Encountered this issue today and spent an hour debugging it. My issue was resolved by checking the info.plist file and adding the fonts to the UIAppFonts array as they were missing in it:

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

Thanks for saving my time 👏👏👏👏👏👏👏👏👏

gsmartins96 · 2021-03-30T18:59:57Z

I just need to do the following:

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

And in the component I use MaterialIcons:

Icon.loadFont();

EnginYilmaz · 2021-04-30T12:30:06Z

@gsmartins96 thank you for pointing this out. After importing, I added Icon.loadFont(); in componentDidMount. Is adding it to componentDidMount proper use?

RkWoo · 2021-06-19T19:34:58Z

I ran into the problem, and it's ridiculous that I still have to use the same workarounds from two years ago. All this time and the core problem still hasn't been resolved. Thank you @adjoaEdwin and @Seishin, either of your solutions work for me.

Selenestica · 2021-06-30T05:15:08Z

I'm using VS Code instead of XCode, and I wasn't able to follow along with some of the answers above. I found this StackOverflow answer that did help me, however.
https://stackoverflow.com/a/48601234/13021328

Basically, put the following in your command line:
react-native link react-native-vector-icons
And if still doesn't work, simply rebuild the app:
react-native run-ios

I'm guessing my app just needed to be restarted for the changes to take effect. Hope this helps someone.

hwolf0610 · 2021-11-15T08:45:45Z

Thanks @Seishin .
When I add below code into info.plist, this was work for me.

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

SpQuyt · 2023-01-09T17:32:09Z

I want to make some additions. If you guys add those line in Info.plist and still not working, try add those line AT THE TOP of Info.plist.
Then cd ios => pod install
And clean build
Then rebuild xcode app again.

Sudarshan101 · 2023-03-13T14:42:32Z

follow the below link for solution
https://www.devhubspot.net/post/detail/react-native-unrecognised-font-family-error-solution

Seishin mentioned this issue Oct 30, 2019

Unrecognized font family Material Design icons #456

Closed

Andreychikov-Vasiliy mentioned this issue Apr 2, 2020

when used RadioButton android in proper show icon but ios in error Matirial Design icons Unrecognized callstack/react-native-paper#1729

Closed

suman-vanan added a commit to suman-vanan/ssb-frontend that referenced this issue Dec 19, 2020

Properly linked react-native-vector-icons

e60d2c5

(See: oblador/react-native-vector-icons#965) and installed @react-navigation depdendencies

johnf closed this as completed Aug 5, 2023

Unrecognized font family Material Icons? #965

Unrecognized font family Material Icons? #965

Comments

bhoomesh950 commented Mar 14, 2019 • edited Loading

oblador commented Mar 18, 2019

pachun commented Apr 22, 2019

SnehalAgrawal commented Aug 16, 2019

adjoaEdwin commented Oct 16, 2019 • edited Loading

ghost commented Oct 29, 2019

BatDroid commented Oct 30, 2019

Seishin commented Oct 30, 2019 • edited Loading

lehmamic commented Oct 31, 2019

janhesters commented Nov 5, 2019 • edited Loading

AlexandreBonfim commented Nov 12, 2019

manoelneto commented Nov 20, 2019

Jonathansoufer commented Nov 22, 2019

YeshanJay commented Jan 22, 2020

naderghanbari commented Jan 28, 2020 • edited Loading

moazkh60 commented Feb 7, 2020

nakulthebuilder commented Feb 9, 2020

ChiwanAhn commented Feb 10, 2020 • edited Loading

davisbento commented Feb 11, 2020

stanimirsp5 commented Apr 12, 2020

jedsada-jed commented Apr 21, 2020

xlcrr commented Apr 25, 2020 • edited Loading

aqeebimtiaz commented Jun 12, 2020

TommyLeong commented Jul 25, 2020

ShivamJoker commented Jul 29, 2020

weblancaster commented Aug 1, 2020 • edited Loading

mhalesto commented Aug 24, 2020

aleluis777 commented Sep 15, 2020

paulo101977 commented Dec 9, 2020

nphausg commented Mar 29, 2021

gsmartins96 commented Mar 30, 2021

EnginYilmaz commented Apr 30, 2021 • edited Loading

RkWoo commented Jun 19, 2021

Selenestica commented Jun 30, 2021 • edited Loading

hwolf0610 commented Nov 15, 2021

SpQuyt commented Jan 9, 2023

Sudarshan101 commented Mar 13, 2023

bhoomesh950 commented Mar 14, 2019 •

edited

Loading

adjoaEdwin commented Oct 16, 2019 •

edited

Loading

Seishin commented Oct 30, 2019 •

edited

Loading

janhesters commented Nov 5, 2019 •

edited

Loading

naderghanbari commented Jan 28, 2020 •

edited

Loading

ChiwanAhn commented Feb 10, 2020 •

edited

Loading

xlcrr commented Apr 25, 2020 •

edited

Loading

weblancaster commented Aug 1, 2020 •

edited

Loading

EnginYilmaz commented Apr 30, 2021 •

edited

Loading

Selenestica commented Jun 30, 2021 •

edited

Loading