Icons missing during production deploy

If I build and deploy the app to my server everything looks correct, all the icons are there.  However, when I add the –prod flag and then deploy, all the igx-icon elements are missing.  I just see the text, like arrow_drop_down instead.  What am I missing?

Hello Scott,

If the material icons are missing in your prod build, I suspect that there are not being bundled correctly with your application. Where are you "linking" them? Inside your styles, index.html or angular.json configuration?

A good practice is to put the material icon font files somewhere inside the src/assets directory of your project as the Angular CLI is configured to properly bundle/reference that folder when building/serving the app.

Hi Scott,

If you're using external SVG icons the process is similar as described by Radoslav. The .svg files should be placed in src/assets and ensure they are properly bundled and deployed on the server.

I'm just using your built-in ones, like the arrow_drop_down.  I haven't explicitly added anything else.

We don't have our own icons but we're using Material ones. We also provide possibility to load icons from font awesome or custom SVG icons.

There are several ways to provide the material icons in a project. I'm not sure which of them you're using. In my opinion the easiest way is to just link the material icon font in your app index.html file as described here:

https://google.github.io/material-design-icons/#icon-font-for-the-web

This would work in both dev and prod mode without any additional bundling.

If linking the material icons in the index.html file doesn't help could you please provide a simple runnable application describing the issue and we'll investigate it.