Unable to load images from manifest file Angular PWA, Firebase Hosting

I've been banging my head against the wall for quite a while now.

I followed this guide in order to make my Angular app a PWA and host it with firebase https://ionicframework.com/docs/angular/pwa

On the guide it specifies this "What do you want to use as your public directory?" Enter "www".

So the above created a www folder that contains the below on the image :

In order for it to be able to avoid 404 index.html not found, I had to change my firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "www/browser",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "ngsw-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Also here is my manifest from inside the browser folder

{
  "name": "pongPong",
  "short_name": "pongPong",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
 
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

Not matter what path I change, I always get

Error while trying to use the following icon from the Manifest: https://bestpractices-7894a.web.app/icons/icon-152x152.png (Download error or resource isn't a valid image)

So, after an alarming amount of trial and error here my own answer.

Based on my build, the webmanifest file was loading properly. The issue is that the path for the icons is starting directly from the icons folder, meaning the boilerplate of the angular PWA in conjunction with the firebase deploy, starts with icons/your-icon.png while the correct format is your-icon.png

Hope this helps someone avoid the hell I've been through