Icons are not displaying in HeaderButtons in React-native

Question

Icons are not displaying in HeaderButtons. Instead the text given for fallback is displaying only. Here is my Code for component:

import React from "react";

import { Platform } from "react-native";
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from 'react-native-vector-icons';

import Colors from '../constants/Colors';

const CustomHeaderButton = props => {
    return (
        <HeaderButton
            {...props}
            IconComponent={Ionicons}
            iconSize={23}
            color={Platform.OS === "android" ? "white" : Colors.primaryColor}
        />
    );
};

export default CustomHeaderButton;

Here is the file in which I imported it:

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

import { MEALS } from '../data/dummy-data';
import HeaderButton from '../components/HeaderButton';

const MealDetailScreen = props => {

    const mealId = props.navigation.getParam("mealId");

    const selectedMeal = MEALS.find(meal => meal.id === mealId);

    return (
        <View style={styles.screen}>
            <Text>{selectedMeal.title}</Text>
            <Button title="Go back to Categories!" onPress={() => {
                props.navigation.popToTop();
            }} />
        </View>
    );
}

MealDetailScreen.navigationOptions = (navigationData) => {
    const mealId = navigationData.navigation.getParam("mealId");
    const selectedMeal = MEALS.find(meal => meal.id === mealId);
    return {
        headerTitle: selectedMeal.title,
        headerRight: () => (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                <Item
                    title="Favorite"
                    iconName="star"
                    onPress={() => {
                        console.log("Mark as favorite.");
                    }}
                />
            </HeaderButtons>
        )
    };

};

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        // backgroundColor: "white"
    }
});

export default MealDetailScreen;

It is not giving any error and giving the output in console. But icon for star is not displaying.

Answer 1

I got the error. Instead of this:

import { Ionicons } from 'react-native-vector-icons';

I added this:

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

and icon appeared.