8

using the snack below: https://snack.expo.io/ry_5rCk84

I am trying to display the icon 'wifi_off' using Material Icons in my react native app (just shared this as a snack on expo for easier sharing) but this is not a recognised value for prop 'name'. and ends up displaying a '?' for unknown icon. I am able to use wifi-off icon using 'material-community' icon set

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Icon} from 'react-native-elements';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <Card>
          <AssetExample />
        </Card>
        <Icon name='wifi' size={50} type='material'/>
        <Icon name='wifi-off' size={50} type='material-community' />
        <Icon name='wifi_off' size={50} type='material' />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

enter image description here

nebula_007
  • 171
  • 1
  • 2
  • 13

2 Answers2

12

react-native-elements uses react-native-vector-icons to display the icons.

react-native-vector-icons has a directory where you can check which icons are available, you can look them up by name. https://oblador.github.io/react-native-vector-icons/

If you search for all the icons that have wifi in their name you find the following result for MaterialIcons and MaterialCommunityIcons

icons available

If you search for wifi_off you will find that there are no results.

enter image description here

Therefore wifi_off is not available to use.

It is also worth noting that react-native-elements currently doesn't support the latest version of react-native-vector-icons, you can see that in this currently open issue.

Andrew
  • 26,706
  • 9
  • 85
  • 101
  • thanks for clarifying and detailed explanation. the icon I am looking for doesn't appear to be part of react-native-vector-icons either (not just react-native-elements), while the GitHub document for the package mentions it's using the latest version of Material Icons. does this mean that not all icons for the version will be included in the package? – nebula_007 Feb 25 '19 at 04:44
  • I believe that is the case. I don’t know why it wasn’t included. I guesss that is why they have the directory so you can check which icons are included. You could open another issue on the repo requesting the additional icons be included. – Andrew Feb 25 '19 at 07:00
2

When you are using react native elements Icon, behind the scenes it is searching in a list https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json, here you can find the names of the Icons that are supported and as you can see "wifi_off" is not here, maybe you can try "signal-wifi-off".

David Vittori
  • 1,146
  • 1
  • 13
  • 30