Ionicons: Any option to serve ionicons locally?

[arkn98]

My React application is using the font-icon version of Ionicons (using CSS). The style of the page breaks when the icons won't load (i.e., when there is no internet). As my app will be deployed on a local intranet where internet won't be available for most of the time. Is there any possibility to use Ionicons (Font icon, to be exact) offline?

[nevf]

+1 This is needed for Offline apps / PWA's.

[arkn98]

Okay. For now, I'm going to use the individual SVGs provided in the repo.

[nevf]

@arkn98 I don't understand why you closed this as the issue is unresolved?

[zmarwa]

Same, my app is running without internet. Any solution to use ionic icon offline?

[hstevanoski]

Has anyone found a solution yet?
I am using them in my React application and I need to serve them locally as well.
@arkn98 please reopen this issue.
Thank you!

[kAlvaro]

With NPM:

npm install ionicons

Then find the dist subdirectory inside node_modules.

Disclaimer: I've no idea why this isn't clearly disclosed, nor if there're licensing issues.

[mutoe]

you can refer to https://github.com/ionic-team/ionicons/issues/821#issuecomment-720108400, it's works fine for me.

[yonkov]

+1 for an easy option to load the icons locally, I would like to bundle them inside a WordPress theme and it is a requirement from the review team to bundle all the theme's resources locally. There should be information about that on the Ionicons website.

[ConnectGrid]

Yah, we've battled with trying to get Ionicons to work well locally. We don't use NPM, nor should we be required to just to use an icon set. We appreciate that the library is freely available, but it should not be difficult to install, nor require compiling before it can be used. Makes little sense. The problem with the "solution" posted here is that we'd have to run through it again with each version release, and that's not friendly asset management.

Good work on the icon set, but please think about developers that work in different environments. We'd love to advertise that we use Ionicons, but not with the "installation tax" currently in place.

Is it a licensing issue?

[aoedipus]

Here's what I did - a bare bones solution that involves copying some required javascripts to run locally:

https://unpkg.com/[email protected]/dist/ionicons/ionicons.js
https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js
https://unpkg.com/[email protected]/dist/ionicons/p-4372c4bc.js
https://unpkg.com/[email protected]/dist/ionicons/p-6f4eae92.js
https://unpkg.com/[email protected]/dist/ionicons/p-7815a89a.entry.js
https://unpkg.com/[email protected]/dist/ionicons/p-2792752.js
https://unpkg.com/[email protected]/dist/ionicons/p-27972752.js

Once you upload those to your server, reference the first two in your .html page like so:
<script type="module" src="yourpath/ionicons.esm.js"></script> <script nomodule="" src="yourpath/ionicons.js"></script>

you'll also need a fonts folder. I just grabbed the svg/ folder from here: https://github.com/ionic-team/ionicons/tree/master/src/svg , or you can pull down the designer pack from here: https://ionicons.com/

Then setup your .css and .html refs as usual. For example, I did things llike this for the css:
ion-icon { position: absolute; width: 30px; height: 30px; z-index: 5; }
... and variants of this for the html:
<ion-icon src="css/fonts/ionicons-v5.2.3/svg/play-circle-sharp.svg">

That's pretty much it.