React Native for Windows app on Tab Navigator show Rectangle icons in React Navigation 6.1.9

Question

I'm trying to use icon (Ionicons by Ionic) in my project (React Native for Windows app) from https://github.com/oblador/react-native-vector-icons and it work very well in android but in Desktop app is show Rectangle. I did to add font files (...\TestNavigation1\windows\TestNavigation1\Assets\Ionicons.ttf). Despite all this, the icons still won't display. What could be causing this issue? Are there any additional steps I need to take to get the icons to show up? Thank you.

Image: Android app Desktop app

On set BottomTabNavigator

import { View, Text } from 'react-native'
import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { ROUTES } from '../constants';
import { HomeScreen, WalletScreen, NotificationsScreen, SettingsScreen } from '../screens';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarActiveTintColor: '#e91e63',
                tabBarIcon: ({ color, size, focused }) => {
                    let iconName;
                    if (route.name === ROUTES.HOME_TAB) {
                        iconName = focused ? 'home' : 'home-outline';
                    } else if (route.name === ROUTES.SETTINGS) {
                        iconName = focused ? 'settings' : 'settings-outline';
                    } else if (route.name === ROUTES.WALLET) {
                        iconName = focused ? 'wallet' : 'wallet-outline';
                    } else if (route.name === ROUTES.NOTIFICATIONS) {
                        iconName = focused ? 'notifications' : 'notifications-outline';
                    }
                    return <Icon name={iconName} size={size} color={color} />;
                },
            })}
            >

            <Tab.Screen name={ROUTES.HOME_TAB} component={HomeScreen} />
            <Tab.Screen name={ROUTES.WALLET} component={WalletScreen} />
            <Tab.Screen name={ROUTES.NOTIFICATIONS} component={NotificationsScreen} />
            <Tab.Screen name={ROUTES.SETTINGS} component={SettingsScreen} />
        </Tab.Navigator>

    )
}

export default BottomTabNavigator

On Home page

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {COLORS} from '../../constants';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const HomeScreen = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: COLORS.bgColor,
      }}>
      <Text>Home!</Text> 
      <MaterialCommunityIcons name="home" color='#e91e63' size={20} />

    </View>
  );
};

export default HomeScreen;

I need Desktop app is show icons same android app

Answer 1

You have added wrong font, so Window app cannot display as you wish.

You use MaterialCommunityIcons, so you need to add MaterialCommunityIcons.ttf to assets folder, not Ionicons.ttf