primeng icons appearing as boxes within primeng control

Question

I have created sample angular application in stackblitz and imported all packages to get primeng working.

my "styles"look like this in angular.json

"styles": [
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",              
              "src/styles.css"
            ],

I had a look at this question but could not find any thing similar.

Here is stack blitz link.

UPDATE 1

I realized there are few warning on console complain about 'Failed to decode downloaded font:'

Failed to decode downloaded font: <URL>
(index):1 Failed to decode downloaded font: https://hemant-primengicon-issue.stackblitz.io/fonts/open-sans-v15-latin-regular.woff2
(index):1 Failed to decode downloaded font: https://hemant-primengicon-issue.stackblitz.io/fonts/primeicons.ttf
(index):1 Failed to decode downloaded font: https://hemant-primengicon-issue.stackblitz.io/fonts/open-sans-v15-latin-regular.woff
(index):1 Failed to decode downloaded font: https://hemant-primengicon-issue.stackblitz.io/fonts/open-sans-v15-latin-regular.ttf
(index):1 Failed to decode downloaded font: https://hemant-primengicon-issue.stackblitz.io/fonts/primeicons.woff