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

[serox-rr]

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)