Unrecognized font family Material Icons?

[bhoomesh950]

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]

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]

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

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]

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]

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]

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

[Seishin]

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]

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]

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

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

[manoelneto]

@Seishin really helped me. Thanks!!!!

[Jonathansoufer]

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

[YeshanJay]

Thank you @Seishin 😃

[naderghanbari]

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

[moazkh60]

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]

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

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]

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]

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

[jedsada-jed]

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]

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]

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]

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]

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]

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

npx react-native link solved it for me RN 0.63.2

[aleluis777]

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]

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

[nphausg]

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]

I just need to do the following:

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

And in the component I use MaterialIcons:

Icon.loadFont();