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:
However, running after the update, the app requests this url:
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.
1 Answer
Just found the answer to my question.
Updating Ionic from 4 to 5 changes how icons (ionicons) are handled. Platform specific variants are no longer used, thus "md-" and "ios-" in filenames are no longer used.
I just changed the names of the SVG-files beginning with "md-" (e.g. md-br-home.svg to br-home.svg), and then deleted the ones beginning with "ios-".
I also used some standard ionicons icons that had been removed or renamed, so I had to fix that too. A list of all changes is available on the page linked above.
