Why have the urls to SVG-icons in my Ionic app changed after update?

I'm updating an old Ionic app:

  • Angular: 8.2.9 => 11.2.12
  • Angular CLI: 8.3.8 => 11.2.11
  • Ionic: 4.10.0 => 5.6.6
  • Ionic CLI: 5.4.16 => 6.14.0

The app starts when i run it locally (using ionic serve), but the SVG-icons does not show.

If I look at one particular icon, I find two versions of the icon in the source files:

  • \src\assets\custom-ion-icons\md-br-home.svg
  • \src\assets\custom-ion-icons\ios-br-home.svg

The place where the icon is used looks lite this:

<ion-icon name="br-home"></ion-icon>

When running the old version of the app, the icon gets fetched and shown with this url: http://localhost:8100/svg/md-br-home.svg

However, running after the update, the app requests this url: http://localhost:8100/svg/br-home.svg

I'm not sure how the "md-" part is added in the old version of the app, but somehow this have disappeared.

If I change the filename of md-br-home.svg to br-home.svg, it works. Maybe that's the solution? But will this mess something up when I build and distribute this app? I'd like to get a better understanding of how this i supposed to work.

Read more here: https://stackoverflow.com/questions/67381032/why-have-the-urls-to-svg-icons-in-my-ionic-app-changed-after-update

Content Attribution

This content was originally published by haagel at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: