React Native安装Vector Icons后图标不显示怎么办？

设计师路杨提问于 2026-01-27 18:12:27 阅读 77

框架

刚用npm install react-native-vector-icons装了图标库，按教程导入MaterialIcons后，页面就是显示不了图标，控制台也没报错。我试过重启metro和清除缓存，还是空白。

代码是这样写的：


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

// 使用时
<MaterialIcons name="home" size={30} color="black" />

其他图标包比如Entypo能正常显示，唯独Material Icons和AntDesign显示不出来，这是怎么回事？

我来解答赞 8 收藏

反馈

2 条解答

UX志青 Lv1

安卓的话得手动把字体文件放到 assets/fonts 里，iOS 要在 Info.plist 加允许的字体列表。你试试把 node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf 这个文件拷到 android/app/src/main/assets/fonts/ 目录下，应该能用。

2026-02-13 08:06

极客峻珲 Lv1

嗯，这问题我之前也遇到过。MaterialIcons和AntDesign显示不出来，大概率是字体文件没正确加载的问题。虽然你用了npm安装，但有些库还需要额外的配置步骤。

先检查一下是不是少了link这一步：

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

如果之前没执行过这个命令，现在补上试试。

还有一种可能是字体文件在打包时被忽略了。调试看看你的项目里有没有Fonts目录，里面应该有对应的.ttf文件。如果没有，或者文件名不对，那估计就是配置没生效。

另外，如果你用的是React Native 0.60以上的版本，可能需要手动在android/app/build.gradle里加一行：

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

最后再清理下缓存重新构建：

npx react-native start --reset-cache

npx react-native run-android

如果还是不行，建议直接卸了重装一遍库，顺便确认下版本号是不是最新的。实在搞不定的话，可以暂时用FontAwesome替代，那个一般不会出问题。

2026-01-29 21:00