How to add fonts for react-native-vector-icons from react-native-paper?

[ClaudiuHBann]

I added the default font MaterialDesignIcons.ttf into the Assets folder, the msix contains the font under the Assets folder but the react-native-vector-icons doesn't find it, where should fonts be located or where this library expects them to be?

My dependencies are:

"@react-native-vector-icons/material-design-icons": "^12.0.1",
"react": "19.0.0",
"react-native": "0.78.2",
"react-native-paper": "^5.14.5",
"react-native-windows": "0.78.5",

[huseynovvusal]

Hi @ClaudiuHBann ! 👋

For react-native-vector-icons to recognize custom fonts like MaterialDesignIcons.ttf, you need to:

1. Font Placement:
   Place your font files (e.g., MaterialDesignIcons.ttf) in the assets/fonts directory at the root of your project (not just inside Assets for MSIX).

2. Link Fonts:
   If using React Native CLI, add this to your react-native.config.js:

   module.exports = {
     assets: ['./assets/fonts/'],
   };

   Then run npx react-native link to link the fonts.

3. Windows Specific:
   For react-native-windows, ensure the font is included in your project's .vcxproj or .csproj under <Content Include="Assets\MaterialDesignIcons.ttf" /> and properly referenced in your app's manifest if needed.

4. Rebuild:
   After adding and linking, rebuild your app to apply the changes.

Summary:
Fonts should be in assets/fonts for React Native to detect them; MSIX just packaging isn't enough. Also, link and reference fonts correctly for Windows platforms.

Let me know if you need platform-specific config examples!

[ClaudiuHBann]

Thanks for the reply @huseynovvusal, I tried what you suggested, besides the linking part because npx react-native link doesn't work, I tried npm link and npx react-native-assets instead, with the following changes:

I did a clean and rebuild of the windows project but still nothing: