Skip to content

Unrecognized font family Material Icons? #965

Closed
@bhoomesh950

Description

@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

Simulator Screen Shot - iPhone X - 2019-03-14 at 15 31 50

Screenshot 2019-03-14 at 3 35 52 PM

Activity

oblador

oblador commented on Mar 18, 2019

@oblador
Owner

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

pachun commented on Apr 22, 2019

@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

SnehalAgrawal commented on Aug 16, 2019

@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

adjoaEdwin commented on Oct 16, 2019

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

Screenshot 2019-10-16 at 11 41 27 PM

ghost

ghost commented on Oct 29, 2019

@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

BatDroid commented on Oct 30, 2019

@BatDroid

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

Seishin

Seishin commented on Oct 30, 2019

@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

lehmamic commented on Oct 31, 2019

@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

janhesters commented on Nov 5, 2019

@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

AlexandreBonfim commented on Nov 12, 2019

@AlexandreBonfim

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

manoelneto

manoelneto commented on Nov 20, 2019

@manoelneto

@Seishin really helped me. Thanks!!!!

Jonathansoufer

Jonathansoufer commented on Nov 22, 2019

@Jonathansoufer

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

YeshanJay

YeshanJay commented on Jan 22, 2020

@YeshanJay

Thank you @Seishin 😃

added a commit that references this issue on Jan 26, 2020

27 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @johnf@Seishin@oblador@weblancaster@naderghanbari

        Issue actions

          Unrecognized font family Material Icons? · Issue #965 · oblador/react-native-vector-icons