latest ion-icons not working with ionic5 on uiwebview and wkwebview

[rashmendis]

I was working on a latest ionic project and tried to get these icons to work but there was no luck. Then I tried the sample ionic app which is getting generated with the cli which has the ion-menu with ion icons. Those are working on the iPad browser but not inside the Webview. Tried the old ionicon:4.6.3 and that works fine.

Environment:
Angular 9.0.6
Ionic 5

[himanshuarya]

I can also confirm this issue. In my case, the icons appear the first time but when I force close the Ionic app and open the app again, they disappear because the SVG does not load in the Shadow Content as shown in the screenshot by @rashmendis

[rashmendis]

Same for me

…

On Jun 15, 2020, 5:45 PM +0530, himanshuarya ***@***.***>, wrote: I can also confirm this issue. In my case, the icons appear the first time but when I force close the Ionic app and open the app again, they disappear because the SVG does not load in the Shadow Content as shown in the screenshot by @rashmendis — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[himanshuarya]

Another observation is that even on using a custom SVG, the SVG does not load the second time on force closing the app.

[rashmendis]

Yes. Same for me

…

On Jun 15, 2020, 6:21 PM +0530, himanshuarya ***@***.***>, wrote: Another observation is that even on using a custom SVG, the SVG does not load the second time on force closing the app. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[lhaiscapyba]

Same issues for me

[jdpsbh]

Same here. Not only with UIWebview, also with WKWebview.

[jdpsbh]

@rashmendis how did you used the old ionicon:4.6.3? Did you uninstall the 5.x and install the 4.x?

[rashmendis]

Tried that but since ionicon is a dependency for ionic it will install ionicon5 with ionic 5. So I had to downgrade ionic to ionic4

…

On Jul 19, 2020, 10:45 AM +0530, jdpsbh ***@***.***>, wrote: @rashmendis how did you used the old ionicon:4.6.3? Did you uninstall the 5.x and install the 4.x? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[himanshuarya]

@brandyscarney is anyone from the Ionic team looking into any of the ion-icon issues? It looks like none of the ion-icon issues haven't been assigned, triaged, or being investigated upon. This issue is one of the major issues in Ion-icon v5 which comes along bundled with Ionic 5. This is a blocker issue that is preventing us to upgrade from Ionic 4 to Ionic 5. Can you please get this issue resolved?

[bensperry]

Hey @himanshuarya, we hear you. Can you share more information on the issue you're seeing (code sample, screenshots)?

[himanshuarya]

@rashmendis Would you be able to share the code of the sample ionic app in which you were able to reproduce this issue?
@bensperry - @rashmendis had shared a DOM screenshot where there is no content in the icon-inner div in the Shadow Content. Please refer to that screenshot in the first comment.

[rashmendis]

@bensperry Just do a ionic start myApp tabs and create an app with ion-icons. Then have to build the app and run it inside a uiwebview or wkwebview in iPad or an Apple device.

[bensperry]

Hey @rashmendis, this is frustrating. We are unable to reproduce the issue on our end.

Basically, we need more info. What are you using to deploy the app—are you using Capacitor or Cordova? Please share the exact steps for us to follow and be as specific as possible. This will greatly help us nail down exactly what might be going wrong more quickly.

[rashmendis]

@bensperry Not using both Capacitor or Cordova. What you have to do is create a tab app using ionic start myApp tabs. Then you need to build the app using ionic build --prod. Then You have to create a iOS app with a UIWebView or WKWebView and load the ionic app which we build earlier. App is working directly on iPad Safari app without any issues but not working inside the UIWebView or WKWebView. I was testing it inside a Commercial iOS app so won't be able to share the code. But as you can see in the comments it's a common issue when we run the ionic5 app inside a iOS WebView.

[liamdebeasi]

Thanks for the issue. So just using WKWebView or UIWebView is not going to be sufficient to get Ionicons loading. The reason is that when an icon SVG is loaded, it is treated as a local file, and WKWebView has some limitations referencing local files by itself.

The best solution here is to use a small local server to serve the files. The easiest way to do this is to use Capacitor. You can view our Getting Started Guide to quickly integrate Capacitor into your existing app.

Can you try your app with Capacitor and let me know if it resolves the issue?

[Sagar-rr]

I was facing same issue. my issue was solved by changing path in angular.json file
Old path:
....
"assets": [
{
"glob": "/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
....

new path:
....
"assets": [
{
"glob": "/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "/*.svg",
"input": "node_modules/ionicons/dist/svg",
"output": "./svg"
}
],
....

[fortesp]

Any news on this? <IonIcon .../> is not shown in WebView ...

[liamdebeasi]

Thanks for the report and apologies for the delay. Does this issue still reproduce using the latest version of Ionicons? If so, is there a sample app I can try?

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionicons, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionicons!