SVG flags can't be retrieved

[wadie]

Describe the bug
Created a fresh Angular 9 project with material, getting following error for all flags
Error: Error retrieving icon :bl! <svg> tag not found

To Reproduce
Steps to reproduce the behavior:
Go to https://stackblitz.com/edit/angular-9-material-starter-4fd9kj?file=angular.json
I created a stackblitz where you can reproduce the issue. it's a clean Angular 9 installation with material

Expected behavior
For the flags to load

[morrowyn]

Experiencing the same with angular 12 and
@angular-material-extensions/select-country": "^5.0.1"
"svg-country-flags": "^1.2.10"
The assets are not copied to the src/assets directory, they remain inside the node_modules directory.

[waelbenmustapha]

still not fixed i had to copy paste them manually so they work

[leibovitzgil]

the problem is with the output path when the svg resources are being copied from the node_modules to the local assets.
try changing it to the following setup (in angular.json under assets section):

{
                "glob": "**/*",
                "input": "./node_modules/svg-country-flags/svg/",
                "output": "./assets/svg-country-flags/svg/"
              }

that should solve your problem.

@AnthonyNahas - what's the procedure to contribute to this project, I can open PR

[TonyGolem]

the problem is with the output path when the svg resources are being copied from the node_modules to the local assets. try changing it to the following setup (in angular.json under assets section):

{
                "glob": "**/*",
                "input": "./node_modules/svg-country-flags/svg/",
                "output": "./assets/svg-country-flags/svg/"
              }

that should solve your problem.

@AnthonyNahas - what's the procedure to contribute to this project, I can open PR

Great Solution, 17/06/22 works

[AnthonyNahas]

a PR would be appreciated 🙏

[mindarchitect]

In my case the problem was with base URL interceptor. So, gentle hint: if svg images are available under assets, check if some interceptor does not modify assets folder URL while loading them. Good luck!

[salmankhaled-egabi]

Describe the bug
Created an Angular 14 project with material, getting following error for all flags
handleError Error: Error retrieving icon :af! this.tokenGetter is not a function
and no flag loaded for any country.