React Native项目使用React Native Elements遇Material Icons字体未识别错误

Hey there, I’ve dealt with this exact error plenty of times when using React Native Elements on iOS—total headache, but we can fix it with a few straightforward steps:

1. Verify Fonts Are Added to Your iOS Project #

React Native Elements relies on react-native-vector-icons for icons, and sometimes automatic linking doesn’t properly add the font files to your Xcode project. Here’s how to check:

• Open your project in Xcode, select your app target, and go to the Build Phases tab.
• Look for the Copy Bundle Resources section—make sure MaterialIcons.ttf, MaterialIconsOutlined.ttf, MaterialIconsRound.ttf, MaterialIconsSharp.ttf, and MaterialIconsTwoTone.ttf are listed here.
• If they’re missing:
  1. Navigate to node_modules/react-native-vector-icons/Fonts in your project folder.
  2. Drag all the Material Icons-related .ttf files into the Copy Bundle Resources list.
  3. Make sure to check "Copy items if needed" and select your app target when prompted.

2. Double-Check Your Info.plist Font Declarations #

Even if the fonts are in your project, iOS won’t recognize them unless they’re listed in Info.plist:

• Open your project’s Info.plist file (edit it as source code for clarity).
• Ensure there’s a UIAppFonts array with all the Material Icons filenames:

  <key>UIAppFonts</key>
  <array>
    <string>MaterialIcons.ttf</string>
    <string>MaterialIconsOutlined.ttf</string>
    <string>MaterialIconsRound.ttf</string>
    <string>MaterialIconsSharp.ttf</string>
    <string>MaterialIconsTwoTone.ttf</string>
  </array>
  

• Save the file and close it.

3. Clear Caches and Rebuild Everything #

Caches are often the culprit here—let’s wipe them out and start fresh:

• Close Xcode and your iOS simulator completely.
• Run this command in your project root to clean React Native’s cache:

  npx react-native clean
  

• Navigate to your ios folder and re-install pods:

  cd ios && pod deintegrate && pod install && cd ..
  

• Open Xcode again, go to Product > Clean Build Folder (or use the shortcut Cmd + Shift + K).
• Finally, re-run your project:

  npx react-native run-ios
  

4. Manually Link the Vector Icons Library (If Needed) #

While React Native 0.60+ uses auto-linking, sometimes the font linking for react-native-vector-icons fails. Try manually triggering the link:

npx react-native link react-native-vector-icons

This should ensure all font files are properly linked to your iOS project.

5. Confirm Icon Usage in Your Code #

Double-check that you’re using the correct icon type in your React Native Elements components. For Material Icons, the type prop should be set to material:

import { Icon } from '@rneui/themed';

// Correct usage
<Icon name="home" type="material" />

Using the wrong type (like material-community instead of material) can also trigger this error.

If none of these steps work, try re-installing the dependencies:

npm uninstall react-native-vector-icons @rneui/themed
npm install react-native-vector-icons @rneui/themed

Then repeat the linking and rebuilding steps above.

内容的提问来源于stack exchange，提问作者Uzama Zaid