Angular Element (web component) Not Bringing Through Font Awesome Icons or Styling

I am using Angular 18, and I made an "Angular Element" (Angular's flavor of web component), which had inside of it icons using Font Awesome and Kendo UI controls. Neither of which have styles that are coming through (so it looks horrible and is unusable).

I made the Angular Element use ViewEncapsulation ShadowDom, I exported it as all the tutorials say, and - no styles for FontAwesome or KendoUI are coming through. I am now manually calling the generated Angular Element CSS file (web-component-styles.css) within the container app's CSS, and I am getting a little styling. However, Font Awesome icons still are not showing up.

I tried:

• Adding the missing Font Faces of FontAwesome within the same directory as my web-component.js and web-component-styles.css - isn't working.
• Manually importing the font files in the container app's CSS, declaring @font-face and pointing to the fonts I manually brought over (since the auto export did not seem to do this correctly, or it is not working) - not working.

Continue reading...