Error: Error retrieving icon :al! Http failure response for http://localhost:4200/assets/svg-country-flags/svg/al.svg: 404 Not Found

[apangr]

Describe the bug
When initializing the component the flags do not load. I followed the steps in the documentation

imports:[
...
 MatSelectCountryModule.forRoot('en'),
...
]

 ..."assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              {
                "glob": "**/*",
                "input": "node_modules/svg-country-flags/svg",
                "output": "src/assets/svg-country-flags/svg"
              }
            ],...

Screenshots

[jezmaghuyop]

@apangr having the same issue, I ended up manually copied the svg-country-flags/svg from node_modules to my assets folder.

[sudarshansb143]

@jezmaghuyop Thanks for the workaround it works on angular 14

[remyryr]

In angular 17 (maybe other versions), you just have to put ./assets/svg-country-flags/svg, instead of src/assets/svg-country-flags/svg, like this:

..."assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/svg-country-flags/svg",
                "output": "./assets/svg-country-flags/svg"
              }
            ],...

Then It will work without copying the module.

[kotte94]

same issue, installed through npm, moreover there are no flags in my local folder(assets)

[IbrahimaDiengGAC]

Install peer dependencies

npm i svg-country-flags -s

then update your angular.json like below (svg-country-flags)

"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "/*",
"input": "./node_modules/svg-country-flags/svg",
"output": "src/assets/svg-country-flags/svg"
}
],**

[cbjrobertson]

Have tried everything and this issue still persists. Enough to make me never want to use this again!