3

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?

Alon
  • 75
  • 1
  • 7
  • Is this an Expo App? – Andrew Mar 06 '19 at 19:43
  • Yes, it’s expo app I’m running from vs code – Alon Mar 06 '19 at 19:44
  • `react-native-vector-icons` is included with Expo. Why are you importing it like that? You shouldn’t need to do that you should be able to access them from `@expo/vector-icons` without having to add anything else to your `package.json` https://docs.expo.io/versions/latest/guides/icons/ – Andrew Mar 06 '19 at 19:47
  • That indeed works, thanks! :) – Alon Mar 06 '19 at 19:54

1 Answers1

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.

Andrew
  • 26,706
  • 9
  • 85
  • 101