React Native iOS Fix: MaterialIcons Showing “?” (Font Not Loaded) – Complete Guide

If your React Native app is showing ? instead of MaterialIcons on iOS, the issue is almost always caused by a missing or unregistered icon font in the iOS build.

This guide explains:

• Why this happens
• How to fix it properly
• How to avoid the common “Multiple commands produce MaterialIcons.ttf” error

---

Symptoms

You are using:

import MaterialIcons from '@react-native-vector-icons/material-icons';

And rendering icons like:

<MaterialIcons name="dashboard" size={24} color="#2563eb" />

But on iOS, you see:

• A ? instead of icons
• Blank icons
• Or missing glyphs

---

Root Cause

The issue happens because MaterialIcons.ttf is not properly loaded in the iOS app bundle.

On iOS, fonts must be:

1. Included in the app resources
2. Registered in Info.plist

If either step is missing, iOS cannot render the icon font and falls back to ?.

---

Fix (Recommended Solution)

Step 1: Register Font in Info.plist

Open:

ios/<YourAppName>/Info.plist

Add the following:

<key>UIAppFonts</key>
<array>
  <string>MaterialIcons.ttf</string>
</array>

If UIAppFonts already exists, simply append:

<string>MaterialIcons.ttf</string>

---

Step 2: Clean and Rebuild iOS App

After updating Info.plist, you must fully rebuild the app.

Option A: Xcode

• Product → Clean Build Folder
• Delete app from simulator/device
• Run again

Option B: CLI

npm run ios

If issues persist:

rm -rf ~/Library/Developer/Xcode/DerivedData

Then rebuild again.

---

Common Issue: “Multiple commands produce MaterialIcons.ttf”

You may see this error:

Multiple commands produce ... MaterialIcons.ttf

Why this happens

The font is being copied twice:

• Xcode Build Phases (Copy Bundle Resources)
• CocoaPods [CP] Copy Pods Resources

---

Fix Duplicate Font Copy

You must ensure ONLY ONE source copies the font.

Option A (Recommended)

If CocoaPods already handles it, remove MaterialIcons.ttf from:

Build Phases → Copy Bundle Resources

Option B

If you manually manage fonts, ensure CocoaPods is not duplicating it.

After fixing:

• Clean build
• Re-run app

---

Why This Happens on iOS More Than Android

iOS is stricter with asset management:

• Fonts must be explicitly registered in Info.plist
• Fonts must be included in app bundle
• No automatic fallback like Android

Missing any step = icons break or show ?.

---

Quick Checklist

• ✔ MaterialIcons.ttf exists in project
• ✔ UIAppFonts exists in Info.plist
• ✔ Font is listed inside UIAppFonts
• ✔ No duplicate font copy in Xcode Build Phases
• ✔ Clean build performed

---

Final Working Code

import MaterialIcons from '@react-native-vector-icons/material-icons';

<MaterialIcons name="dashboard" size={24} color="#2563eb" />

No changes needed to the import — the issue is purely native iOS font configuration.

---

Summary

If MaterialIcons show as ? on iOS:

• Add MaterialIcons.ttf to UIAppFonts
• Ensure no duplicate font copying in Xcode/CocoaPods
• Clean and rebuild the project

Once correctly configured, icons will render properly across all iOS devices.

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️