Can't use all of the icons in Expo Vector Icons

Question

So this is basically the code I have

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

class DrawerItem extends React.Component {
    render() {
        return (
            <Ionicons name="speedometer" size={14} color="green" />
        )
    }
}

I am trying to use an icon called speedometer, as found in the Ionicons documentation. However, in its place, a question mark ? appears and I get the following error:

Warning: Failed prop type: Invalid prop `name` of value `speedometer` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-airplane","ios-alarm","ios-albums","ios-alert","ios-american-football","ios-analytics","ios-aperture","ios-apps","ios-appstore","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropright","ios-arrow-dropright-circle"...

The error shows me the names I can use, but makes no sense because the Ionicons documentation mentions that there is an icon called speedometer.

Another thing that I found is that that specific icon does not appear in the Expo Vector Icons documentation.

However, I would like to add it. Any way to include ALL icons from the Ionicons library?

Answer 1

You have to import icons this way:

import { MaterialCommunityIcons } from '@expo/vector-icons';
<MaterialCommunityIcons name="speedometer" size={24} color="black" />

Answer 2

As you stated Ionicons does not contain the speedometer icon. Instead use ios-speedometer.

If you really want that specific icon, I'd recommend downloading the SVG and converting it to a standalone component using e.g. react-svgr (or any other svg jsx tool)

Dont forget to install react-native-svg :) You can now import the icon using a normal import.

E.g. import SpeedometerIcon from './icons/Speedometer.js'