Module Federation Font Icons not loaded in Shell

[Richard]

Hello, I currently having a problem loading my font Icons in the Shell of my module federated frontend. It cant load the kendo-font-icons.ttf file anyone have a solution for this?

[Yanmario]

Hi Richard,

I can provide a few suggestions that can be tried on your side.

1. Make sure that font icons are configured for your application, as our components are using SVG icons by default:

https://www.telerik.com/kendo-angular-ui/components/styling/icons#using-font-icons

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings#icons-configuration

2. Check your angular.json configuration and make sure that the folder that contains kendo-font-icons.ttf is part of the assets configuration.

https://angular.dev/reference/configs/workspace-config#assets-configuration

3. Check your CSS (or SCSS) where the font is declared. Instead of a relative path like:

src: url('kendo-font-icons.ttf') format('truetype');

Use an absolute path or a path that works from the shell, for example:

src: url('/assets/fonts/kendo-font-icons.ttf') format('truetype');

Or, if the font is served from the remote, use the full URL:

src: url('http://remote-app-domain/assets/fonts/kendo-font-icons.ttf') format('truetype');

If the above doesn't help, feel free to check the following issue to see if that helps you with your specific case:

https://github.com/angular-architects/module-federation-plugin/issues/770

If that does not help, share a basic example with steps to run it. The team will check if the issue comes from our icons and try to resolve it.

I hope this helps.

Regards,
Yanmario
Progress Telerik