console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync

Question

I'm trying to add an icon from react-native-vector-icons/MaterialIcons:

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

<View style={styles.picture}>
  { <Icon
    name="add-circle"
    onPress={() => alert("Add Picture")}
    color="green"
  /> }
</View>

but i'm getting:

console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync

I tried using Font.loadAsync

await Font.loadAsync({'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')})

Any ideas?

Answer 1

As you are using Expo you would be better using the Icons that are built into it.

Expo in fact comes with react-native-vector-icons. So you don’t need to install anything. You can just import the icons from @expo/vector-icons

https://docs.expo.io/versions/latest/guides/icons/

import { MaterialIcons } from '@expo/vector-icons';

<MaterialIcons
  name="add-circle"
  onPress={() => alert("Add Picture")}
  color="green"
/>

It is also worth checking that the icon exists, you can do this in the directory.