Ionicons: [cli v4] App size too big, all ionicons v4 packed into bundle

I'm seeing only ~400kb added once the apk is created. I don't think that's unreasonable.

EDIT: although, maybe it's closer to the original 2.7MB once unpacked...

With Ionic 4 we really want to move away from custom tooling so we can move fast in more meaningful areas. Basically, focus on our strengths.

I'm open to PRs, but I'm not seeing a maintainable solution to this with custom tooling.

It's especially hard to know which SVGs are unused because different ones can be requested at runtime.

I've to say I'm not really agree with "400kb is reasonable", my markets are markets where users have wifi and 4g but I could think that in other markets 400kb are really meaningful

I also always think "smaller the app is = faster everything is = less users may drop during download from the stores, first boot, etc."

Therefore I don't think that the will of not having a custom tooling should be more important than the size of the app

Of course I'm totally agree with you, it might be complicated to solve

In Font-Awsome didn't they finally solves the same problem or are they still facing it? If they solved it maybe it could give an idea about how to solve the issue

Sorry, those messages were sort of a brain dump towards the end of the day.

I more so meant 400kb is reasonable given how many Ionicons are offered, and the comfort it gives to know that they'll be available even when used dynamically. I totally agree that a small bundle is super important for Ionic! But I have a feeling this issue will be more of a discussion of trade-offs vs something immediately actionable.

Perhaps some research is necessary to see if it's possible to do this during webpack/Angular build. If not, maybe offer a separate tool on ionic-team github org that goes through and removes the SVGs before building an APK/IPA. The Ionic CLI has hooks that can run it, but I'm a bit behind documentation in this area.

@dwieeb no worries, it was late here too, thx for the explanation, I'm agree with you 👍

@peterpeterparker Font-Awesome solved it with V5, you can explicitly import the icons you want and only them will be bundled in your build.
Bonus => with their Angular library it's automatic since it use Typescript imports to determine which icons are used : https://github.com/FortAwesome/angular-fontawesome

Ionic should use a similar strategy, especially if they want their components to be used in webapps.

@dwieeb actually maybe this issue should be move in the ionicons repo because it doesn't impact only the bundle of iOS and Android apps but also all types of app.

If I'm not mistaken, there isn't yet any webpack or rollup plugin to bundle only the necessary Ionicons in any projets. Therefore, in a PWA I might end up having a bundle which will contains all icons too. This will has for final effect that service worker of the PWA might try to cache all icons on the clients device.

Example -> https://deckdeckgo.com -> observe the service worker, it caches all ionicons

I just did a PWA production build (ionic build --prod) and in the WWW folder the SVG's add up to 6.9mb. Surely something must be going wrong??

I am using Ionic Icons 4.5.1 and snapshot fo the SVG.

go to platforms folder ,
search png or jpg ,
delete all images you think you added and don't want.,
Or delete images you dont neeed in your assets/imgs/ folder,

I have solved problem by removing www folder from project and then build.

I have solved problem by removing www folder from project and then build.

It worked, but in my case I also removed plaforms, plugins and node_modules because removing www lead me to another issue, which after removing these aditional folders (and doing npm install and all that) resolved.

Are there any updates on this or workarounds? I'm having the same issue that others have mentioned. Building a Vue app that uses @ionic/vue and I get about 800 svg files bundled on my app. Even worse as @peterpeterparker mentioned, the serviceworker tries to cache them all, which is a non-sense.

If I'm not wrong I thing that this is solved with Ionicons v5 or this isn't a thing anymore in v5.

Therefore I close my issue.

I upgraded to v5 and still get every single icon bundled with the app. It's getting even worse with over 1200 icons (~648kB) in Ionicons v5. Am I missing something @peterpeterparker?

Yeah the problem is still there. I had to create a script to delete unused icons so I can deploy as web app and not have 1200+ icons.
https://gist.github.com/nucklehead/b568dc13d01b18b902c524754a7c9cd4

Maybe this can help someone for now.

In my case (ionic 5 app) the svg folder inside www is 6MB (1230 svg files)

Do the following steps

1. ng build --prod
2. delete www before building from the root folder
3. ionic cordova build android --prod --release

my app size was 24 MB after doing above steps it reduces to 9 MB

Do the following steps

1. ng build --prod
2. delete www before building from the root folder
3. ionic cordova build android --prod --release

my app size was 24 MB after doing above steps it reduces to 9 MB

Followed your steps but problem is still there. Ionic 5 app, 1227 icons are still present, where i'm using only 17-20 icons.

The issue of unnecessary svg icons has to be addressed, we are talking 5-6MB. My app size in total is 9MB, this means the icons are almost 60% of the total size of the binary.

@sylvinrodz @sandipdutta1993 I can't seem to find the www folder, what's the exact pathing on that for both iOS and Android builds?

@aaronwJordan it is the inside root folder

Every similar tool avoids copying files that are unused in the project. Why do we have to have thousands of files in total if 80% of them are not used? Please give this priority, I'm playing around with static hosting and it's insane to sync 1500+ files.