I can not get ion-icons to draw in my application. I have taken an ionic-v3 application and upgraded it to ionic-v7 (and from angular 5 to angular 16).
The application is designed to be run inside of a web view in an iOS application, but this is not a Capacitor or Cordova application. Instead the application is compiled, placed in the application bundle, and loaded from the file system into a WKWebView.
The loads and runs well enough and responds to user interaction. However, none of the <ion-icon> elements draw.
Looking a them in the web inspector I see the <ion-icon> elements and can examine their Shadow DOM. The results look something like <div class="icon-inner"></div>.
I built a new Ionic app using the cli, added an icon, and opened it in a browser. The icons show up there, and looking at the same shadow Dom shows <div class="icon-inner"><svg...><svg></div>. An SVG element in the middle of the shadow DOM.
My application, when running in the iOS app does contain the svg files for all the icons. I can look at the “network” requests in the web inspector and I see that the browser is able to locate, and access, the svg files. If I dynamically change the name attribute of the icon, I see a new network request that loads the icon content from the file system. I can see the rendered file in the web inspector. I can replace my <ion-icon> element with an <img> element that accesses the file and that will draw.
In addition to using the name attribute, I have also tried specifying an ios attribute.
If I include the <script> tag mentioned on the ionicons page, the icons DO render and the system reads the graphics from the web. However my end users may be using this app off-line.
Why do the ion-icons not seem to create their Shadow DOM content?