Easiest way to prevent all ion-icons from displaying?

Ionic Framework
1

I’m looking for a bit of advice.

We have been experiencing this issue now for a while which causes our app to fail on almost all Android 8.1 devices as soon as they encounter an <ion-icon> tag. The Chromium team have logged this as a bug in the latest version of Chrome but unfortunately I cannot wait around much longer for a fix - we have too many Android 8.1 users for us to wait that long (they might be a small percentage of the total but we have around 900k users so its a significant number).

So I need to put a fix in place which allows these users to at least use the app (at the moment it crashes on startup because the side menu uses icons). I’m wondering what the easiest way is for me to make the app hide all icons for Android 8.1 users (our app makes extensive use of <ion-icon> tags across dozens of components).

I realise simply hiding all icons will not be an adequate fix - some of them in certain situations might need replacing by something else. But a starting point would be to hide all icons so at least the app functions. So I’m wondering what is the easiest way for me to make the icons simply not show up for these users. I can detect for Android 8.1 on startup and set a hideIcons flag somewhere. And then against every <ion-icon> tag I can add an ngIf="!hideIcons" or something. But this would need each component to be checking for the value of the flag.

Is there a better cleverer easier way using an Angular directive? (something like adding an attribute to all my <ion-icon> tags and point to a directive which then checks the flag and depending on its value, the icon is either displayed or not). Or is there a better way?

Just throwing this out there in case there is something I have not thought about (which would not be a surprise). Thanks.

2

My first instinct is that this might be amenable to the classic aphorism “all problems can be solved by an additional layer of indirection”. How about creating a <app-icon> component that wraps <ion-icon> in its template and provides (enough of a subset of) the external API shape of an <ion-icon>? Then you’ve created a single bottleneck where you can NOP out the whole operation, replace it with some sort of static “broken icon” image, text, whatever, and once the problem is fixed upstream, just go back to passing through to a real <ion-icon>.

1 Like
3

Thanks. That was the sort of idea I had in mind but it’s good to have it validated!

4

Why not just remove the icons in general?

5

That seems an odd suggestion? We aren’t using icons in the app for the sake of it. We use icons throughout the app to convey certain information to the user? A card icon might indicate that an item has been paid for. A star icon indicates an item has been marked as a favourite. Etc etc etc.

6

Odd thought: png the icons and then include as img

7

Yeah I had wondered about doing something like that. I’m just conscious of the fact that for 99% of our users everything is fine and I want to make a change that does not have any impact at all on them (but just gets the app working for the 1%).

9

Another idea is to take the broken icons, find similar looking ones on a site like https://www.flaticon.com/, and then pass in a path to that SVG rather than using the internal Ionicon.

Granted, even those icons may be broken but worth a shot I think.

edit: A lot of icons on that website can be used royalty free, but just be sure to read the licensing section when using an icon.

10

I don’t think its a case of some of the icons being broken - I think it actually fails on all of them