[Bug]: iOS not displaying the icons correctly #1688

valance · 2024-12-30T07:41:43Z

Which package are you using?

react-native-vector-icons

What platform(s) does this occur on?

iOS

What happened?

The simulator on the left is the iOS simulator. The display is basically "?"

I tried [email protected] @10.1.0 @10.0.0. All showing the same error.

I'm using [email protected].

Relevant log output

There isn't any error report.

Minimal reproducible example

No response

Your computer environment

info Fetching system and libraries information...
System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M1
  Memory: 122.19 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.5
    path: ~/.nvm/versions/node/v18.20.5/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.20.5/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v18.20.5/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "31"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/valancewang/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

The text was updated successfully, but these errors were encountered:

ibrahim-rcdevs · 2024-12-31T11:43:07Z

same here

tomstevens94 · 2025-01-05T21:10:49Z

Some for me, but only on a physical deviceIm having this issue only on a physical device strangely, all seems to behave as expected in an emulator.

RalissonMattias · 2025-01-08T21:03:12Z

Same here, I'm getting this problem with material-design-icons

"@react-native-vector-icons/material-design-icons": "^7.4.47"

Update 1:

After some tests, I just put the font name in my Info.plist and works well

	<key>UIAppFonts</key>
	<array>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>MaterialDesignIcons.ttf</string> --> this line
		<string>MaterialIcons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
	</array>

Magikarppi · 2025-01-09T18:49:48Z

Same here, I'm getting this problem with material-design-icons

"@react-native-vector-icons/material-design-icons": "^7.4.47"

Update 1:

After some tests, I just put the font name in my Info.plist and works well
	<key>UIAppFonts</key>
	<array>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>MaterialDesignIcons.ttf</string> --> this line
		<string>MaterialIcons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
	</array>

I'm having this same issue with RN version 0.73.11 and RNVI versions

"@react-native-vector-icons/ant-design": "^4.4.2",
"@react-native-vector-icons/common": "^11.0.0",
"@react-native-vector-icons/feather": "^4.29.2",
"@react-native-vector-icons/ionicons": "^7.4.0",
"@react-native-vector-icons/material-design-icons": "^7.4.47"

In the migration guide it says:

"Fonts are now automatically loaded on iOS, so you can remove any fonts you have listed in Info.plist"

That does not seem to work. I was able to make icons visible only after adding the fonts to Info.plist

valance · 2025-01-10T06:18:02Z

After some tests, I just put the font name in my Info.plist and works well

	<key>UIAppFonts</key>
	<array>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>MaterialDesignIcons.ttf</string> --> this line
		<string>MaterialIcons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
	</array>

I also have implemented this into Info.plist, but it fails to work for me. :(

johnf · 2025-01-12T02:17:47Z

Apologies the MIGRATION guide was outdated. The fonts do still need to be included in the Info.plist.
WSe have a handy script to help with that referenced in https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-REACT-NATIVE.md#ios

@valance Did you rebuild the app after updating Info.plist?

valance · 2025-01-12T08:49:07Z

Apologies the MIGRATION guide was outdated. The fonts do still need to be included in the Info.plist. WSe have a handy script to help with that referenced in https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-REACT-NATIVE.md#ios

@valance Did you rebuild the app after updating Info.plist?

Thank you very much for your reply.

I got this error message.
npm error 404 Not Found - GET https://registry.npmjs.org/rnvi-update-plist - Not found
npm error 404 'rnvi-update-plist@*' is not in this registry.

ParthDev96 · 2025-01-12T10:02:45Z

Same here.

Apologies the MIGRATION guide was outdated. The fonts do still need to be included in the Info.plist. WSe have a handy script to help with that referenced in https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-REACT-NATIVE.md#ios

@valance Did you rebuild the app after updating Info.plist?

After running this command, I am encountering the issues displayed below

anmol1616jha · 2025-01-22T11:41:35Z

I was facing the same issue, but I followed these steps, and it started working for me:

Navigate to the node_modules folder and open the react-native-vector-icons folder. Copy the Fonts folder from there.
Go to the ios folder and then to the APP_NAME folder. Paste the Fonts folder here.
Drag and drop the Fonts folder into Xcode. Make sure to check the options as shown in the screenshot and verify the folder's location, as indicated.
Add the fonts into info.plist file as mentioned in documentations.
Clear the build folder.
Delete the app from the simulator.
Run the app again.

johnf · 2025-01-24T23:46:28Z

@ParthDev96

After running this command, I am encountering the issues displayed below

That's expected. It tells you about fonts in Info.plist that aren't backed by an installed RNVI package. So if you aren't using them you should remove them manually from Info.plist

johnf · 2025-01-24T23:49:38Z

@valance Do you have @react-native-vector-icons/common installed?
If so, then npx rnvi-update-plist package.json ios/AppName/Info.plist shouldn't return that error

You should see it symlinked in node_modules/.bin

valance · 2025-01-27T08:25:55Z

@valance Do you have @react-native-vector-icons/common installed? If so, then npx rnvi-update-plist package.json ios/AppName/Info.plist shouldn't return that error

You should see it symlinked in node_modules/.bin

Now npx rnvi-update-plist package.json ios/AppName/Info.plist works. Thank you very much.
After that, I rebuild the App.

But still the icons are not displayed, see attached image.

ParthDev96 · 2025-01-29T18:12:36Z

@ParthDev96

After running this command, I am encountering the issues displayed below

That's expected. It tells you about fonts in Info.plist that aren't backed by an installed RNVI package. So if you aren't using them you should remove them manually from Info.plist

@johnf

I checked again but still I am facing same issue while running given command.
And also NotoSans is my custom fonts so may be it should not return an error.

I followed this doc
https://github.com/oblador/react-native-vector-icons/blob/master/docs/SETUP-REACT-NATIVE.md

ParthDev96 · 2025-01-29T18:15:04Z

And also @johnf I am installing @react-native-vector-icons/common package. So please guide me if I am doing anything wrong

One question @johnf
if I am using common package then I need to install all the fonts manually like below?
@react-native-vector-icons/fontawesome6 @react-native-vector-icons/evil-icons

johnf · 2025-02-02T03:46:57Z

if I am using common package then I need to install all the fonts manually like below?
@react-native-vector-icons/fontawesome6 @react-native-vector-icons/evil-icons

Yes that's right. The new version has separate font packages to keep your app size small.

I'm going to update that script so it prints those messages in yellow as they are only warnings.

valance · 2025-02-06T06:51:52Z

@valance Do you have @react-native-vector-icons/common installed? If so, then npx rnvi-update-plist package.json ios/AppName/Info.plist shouldn't return that error
You should see it symlinked in node_modules/.bin

Now npx rnvi-update-plist package.json ios/AppName/Info.plist works. Thank you very much. After that, I rebuild the App.

But still the icons are not displayed, see attached image.

@johnf Hi, I followed your suggestions, after rebuilding the app, it still produced "?" icon.

valance added the bug label Dec 30, 2024

johnf added the waiting Waiting on OP response label Jan 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: iOS not displaying the icons correctly #1688

[Bug]: iOS not displaying the icons correctly #1688

valance commented Dec 30, 2024

ibrahim-rcdevs commented Dec 31, 2024

tomstevens94 commented Jan 5, 2025

RalissonMattias commented Jan 8, 2025 •

edited

Loading

Magikarppi commented Jan 9, 2025

valance commented Jan 10, 2025

johnf commented Jan 12, 2025

valance commented Jan 12, 2025 •

edited

Loading

ParthDev96 commented Jan 12, 2025 •

edited

Loading

anmol1616jha commented Jan 22, 2025 •

edited

Loading

johnf commented Jan 24, 2025

johnf commented Jan 24, 2025

valance commented Jan 27, 2025

ParthDev96 commented Jan 29, 2025

ParthDev96 commented Jan 29, 2025 •

edited

Loading

johnf commented Feb 2, 2025

valance commented Feb 6, 2025

[Bug]: iOS not displaying the icons correctly #1688

[Bug]: iOS not displaying the icons correctly #1688

Comments

valance commented Dec 30, 2024

Which package are you using?

What platform(s) does this occur on?

What happened?

Relevant log output

Minimal reproducible example

Your computer environment

ibrahim-rcdevs commented Dec 31, 2024

tomstevens94 commented Jan 5, 2025

RalissonMattias commented Jan 8, 2025 • edited Loading

Magikarppi commented Jan 9, 2025

valance commented Jan 10, 2025

johnf commented Jan 12, 2025

valance commented Jan 12, 2025 • edited Loading

ParthDev96 commented Jan 12, 2025 • edited Loading

anmol1616jha commented Jan 22, 2025 • edited Loading

johnf commented Jan 24, 2025

johnf commented Jan 24, 2025

valance commented Jan 27, 2025

ParthDev96 commented Jan 29, 2025

ParthDev96 commented Jan 29, 2025 • edited Loading

johnf commented Feb 2, 2025

valance commented Feb 6, 2025

RalissonMattias commented Jan 8, 2025 •

edited

Loading

valance commented Jan 12, 2025 •

edited

Loading

ParthDev96 commented Jan 12, 2025 •

edited

Loading

anmol1616jha commented Jan 22, 2025 •

edited

Loading

ParthDev96 commented Jan 29, 2025 •

edited

Loading