Custom SVG Icons showing in web view but not android

Capacitor
1

Hello everyone! I’ve been developing using vue for a while but am a little new with capacitor and android. Anyways, Im having a little trouble with the <ion-icon> Vue 3 component. The icons show when Im running my project as a web app but when I compile it into a android native apk, they do not load.

Im trying to use my own svgs for icons utilizing the src or the name property. When utilizing the src property I provide the correct directory starting - /src/assets/icon/icon-name.svg . I have also tried using the name property in junction with the addIcon() function but get the same results. Tried placing the addIcon() function in both my main.ts and App.vue files.

Can someone please point out what Im not doing correctly? Thanks!

Using:
Ionic Vue 8
Capacitor 6
Vue 3.3

Tested in both the android emulator and using my personal android device with the same results. As a side note, i did try to submit a ticket but was referred to community support.

2

To anyone who stumbles across this post in the future, the fix can be found here:

TLDR - put your custom SVGs in the public/assets/icons/ directory of your project. From there you can reference them however you like. I decided to stick with the addIcon() function approach to keep my SVG icons organized and in one place. This also allows me to utilize the name property of the <ion-icon> component.