How to serve your ionic icons offline in a PWA

When registering your PWA, the ngsw-config.json file is the most important. Add the following, to ensure your ionic icons are visible offline as well:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**",
        "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
      ]
    }
  },
  {
    "name": "icons",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/svg/*.svg"
      ]
    }
  }
]
}

This will cache all the icons offline. "Prefetch" means: download as soon as possible, or use the cached version". 

You could also do this for one ore some icons only, then do:

"/svg/cloud-offline-outline.svg"

To make this work, make sure you unregister your previous service worker or you build an update of your PWA.