@mhartington were you able to re-produce the error?
This is turning into a bit of a nightmare issue for us - we’ve had reports of other Android 8.1 devices other than the Xperia with the same issue and unfortunately the app becomes unusable. The 1 star reviews continue.
Today I have found that even though this works on one component:
<ion-icon color="dark" name="star-outline"></ion-icon>
when I add exactly the same to another component it fails. This makes a temporary fix to the app incredibly difficult as we rely on ion-icons across the whole app and if I cannot pin it down to certain icons that work and others that fail (consistently) it’s very tricky! 
Mike (or anyone!) - is it possible to use the Ionic 4 icon set with an Ionic 5 app as I noticed that when browsing the ionic icons page on the 8.1 device it was only the new Ionic 5 icons that fail, the Ionic 4 set displays ok?
FYI - I also tried this using the Chrome Beta app on the Android device and this also failed.
It’s going to be hard for us to fix the issue since we cannot reproduce this on our end at the moment. Are you able to make an isolated test case in a blank Ionic starter application?
I guess I could but seeing as the issue occurs when I try to access the ionicons site on an Android 8.1 device (with the latest version of Chrome installed) and it doesn’t work, I don’t think that would help you? Have you tried that on an Android 8.1 device?
The ionic icons site is effectively a test case already.
Yes, I cannot reproduce the issue currently. What I am interested in seeing is if we can narrow down what the root cause is with the icon. (I.e. is the loading causing the issue? Is it the SVG data itself? Something with the Web Component?)
I made a test case with just the icons here: https://codepen.io/liamdebeasi/pen/ExWMQGE
This CodePen renders the heart, card-outline, and mail icons. Do those 3 icons work when you load them up on the affected devices?
Yes that works on that device
Given what you included in Android 8.1 Icons not displaying - #18 by richardshergold it looks like this problem can be reproduced in a browser outside of Ionic Framework. I think it would make sense to see if you can try and reproduce this issue in a CodePen/CodeSandbox with just icons.
Not having to account for Angular and Framework is going to make debugging a lot easier. Once you do that, we can probably starter to drill down and see what exactly is causing Chrome to produce these visual glitches.
Ok, I’ll see what I can find out. Let me know if you have any further thoughts as I’m under a bit of pressure to get a fix out - the ionic icons v4 site opens ok on that device it’s only the new set that does not load - is it possible to use the old icon set with our Ionic 5 app or do you think that will not solve the problem anyway?
Ionicons v4 uses an icon font but Ionicons v5 uses SVG data, so the issue could be related to that.
Feel free to give Ionicons v4 a try in your app, but just be aware that some of the icons you are using may not be available in Ionicons v4.
How would I install it (and uninstall the current set) - the current set is pre-installed ?
Is it just a case of installing the old set?
I would try something like npm install ionicons@4 --save-exact to force it to install v4. If using npm 7 you may need to pass the --legacy-peer-deps flag.
You might have to fight npm a bit since it is going to want to install Ionicons v5.
I may give that a try if we don’t get anywhere.
Actually I am a bit unsure what you mean by this:
How will I create a CodePen/Sandbox displaying the icons without using the framework? (or have I completely misunderstood!)
Ionicons is published as a package separate from the Framework.
See the usage: Ionicons: The premium icon pack for Ionic Framework
There are 2 script tags you can add to the page to load the vanilla JS ionicons web component.
1 Like
Ok thanks, well I produced a codepen but basically it does the same as yours i.e it lists some icons and they work fine. So how are the icons being displayed at ionic.io/ionicons because none of those appear?
@ldebeasi I ran
npm install ionicons@4 --save-exact
and it seemed to run without any complaints but when I run my app on the device no icons appear anywhere at all (including the icon that should appear for the side-menu e.g when I have this in the toolbar:
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
And also the console is full of these errors:
E/Capacitor: Unable to open asset URL: https://pmx/svg/menu-sharp.svg
E/Capacitor: Unable to open asset URL: https://pmx/svg/menu-sharp.svg
E/Capacitor: Unable to open asset URL: https://pmx/svg/caret-back-sharp.svg
etc etc
Looks like it still wants the use ionic 5 icon set - is there anything else I need to do??? !!
@ldebeasi any more advice on this? (either regarding use of the Ionic 4 icons in the Ionic 5 project or regarding the codepen and what you would like me to try in there?). Is it possible for you to set up two or three codepens which (through me testing them on the 8.1 device) would allow you to pinpoint the problem?
How are the icons displayed on the ionicons site? It seems to me that the fact that these do not display on the 8.1 device and yet the simple three icon codepen works fine that this should be a clue?
I just created a new Ionic 5 app using the cli side-menu template and the menu does not appear on the 8.1 device (after the Chrome update). I played around a bit with the app.html file and found that this works fine i.e both mail icons and labels appear on the side menu:
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>Inbox</ion-list-header>
<ion-note>hi@ionicframework.com</ion-note>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon name="mail"></ion-icon>
<ion-label>Mail 1</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon name="mail"></ion-icon>
<ion-label>Mail 2</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
and yet when I add one further item in the list like this it fails (a big white box appears on the screen and the app becomes unusable):
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>Inbox</ion-list-header>
<ion-note>hi@ionicframework.com</ion-note>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon name="mail"></ion-icon>
<ion-label>Mail 1</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon name="mail"></ion-icon>
<ion-label>Mail 2</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon name="mail"></ion-icon>
<ion-label>Mail 3</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
This (I think?) probably points to @rapropos being right about some sort of issue with the icon fetch call?
I’m not sure what to try right now - if you have any suggestions, please let me know - we have a lot of users complaining
@ldebeasi and just to take this outside of the Ionic framework this codePen fails on the 8.1 device (but if you remove the third icon it works fine)
I would recommend removing ion-list and ion-item from the CodePen (since you aren’t using Ionic Framework) and reporting an issue to the Chromium team: Monorail - chromium - An open-source project to help move the web forward. - Monorail.
Alternatively, if you wanted to isolate the issue even more, you could grab the internal icon SVG data from web inspector and paste it into the CodePen three times to see if you could reproduce the issue there as well:
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon s-ion-icon" viewBox="0 0 512 512"><title>Mail</title><path d="M424 80H88a56.06 56.06 0 00-56 56v240a56.06 56.06 0 0056 56h336a56.06 56.06 0 0056-56V136a56.06 56.06 0 00-56-56zm-14.18 92.63l-144 112a16 16 0 01-19.64 0l-144-112a16 16 0 1119.64-25.26L256 251.73l134.18-104.36a16 16 0 0119.64 25.26z"></path></svg>
If you can reproduce the issue using just the SVG data, then the issue may be related to rendering the SVG. If it does not reproduce, then the issue may be related to loading the SVG data using fetch.
The more you can isolate the issue, the easier it will be for the Chromium team to determine whether or not this is a Chromium bug and apply a fix if it is.
1 Like