[GH-ISSUE #514] Angular 6: change svg build folder #307

New issue

Closed

opened 2026-03-03 14:37:24 +03:00 by kerem · 4 comments

kerem commented

2026-03-03 14:37:24 +03:00

Owner

Originally created by @BenDevelopment on GitHub (Dec 17, 2018).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/514

Hi,
When I build my project using ng build, all the svg flags are copied in the project dist root folder.
Is there a way to define another path to put all the svg flags?

Thanks!

Originally created by @BenDevelopment on GitHub (Dec 17, 2018). Original GitHub issue: https://github.com/lipis/flag-icons/issues/514 Hi, When I build my project using `ng build`, all the svg flags are copied in the project dist root folder. Is there a way to define another path to put all the svg flags? Thanks!

kerem closed this issue

2026-03-03 14:37:24 +03:00

kerem commented

2026-03-03 14:37:25 +03:00

Author

Owner

@lipis commented on GitHub (Jan 7, 2019):

Not sure how to help here.. sorry!

@lipis commented on GitHub (Jan 7, 2019): Not sure how to help here.. sorry!

kerem commented

2026-03-03 14:37:25 +03:00

Author

Owner

@oguzhan-arslan commented on GitHub (Jan 11, 2019):

I found a workaround for this, however you cannot use npm this way. After I got the flag-icon-css package all my ratios were wrong (1x1) and I could not fix it. After looking into the style that got loaded in i did not see an indication of 4x3 or 1x1, just the name of the file.

After a closer look it had put all the flags into the root of my build folder. To fix this I just downloaded the css file and got all the flags in the correct folder, so both 1x1 and 4x3. These i put in the assets folder.

So you get:

src
- assets
  - css
    - flag-icon.css <-- main css file
  - img
    - flags <-- here i put the svg assets.
      - 1x1
      - 4x3

Now in the flag-icon.css change the url src from "../flags/...." --> "../img/flags/..."

After this angular.json under assets, make sure "src/assets" is included in the assets propery and finaly in your index.html add:

This will make sure the build folder is neat and structured, and you can use the css selectors throughout your application. Also this fixed the aspect ratio for me..

Hope this helps

@oguzhan-arslan commented on GitHub (Jan 11, 2019): I found a workaround for this, however you cannot use npm this way. After I got the flag-icon-css package all my ratios were wrong (1x1) and I could not fix it. After looking into the style that got loaded in i did not see an indication of 4x3 or 1x1, just the name of the file. After a closer look it had put all the flags into the root of my build folder. To fix this I just downloaded the css file and got all the flags in the correct folder, so both 1x1 and 4x3. These i put in the assets folder. So you get: * src * assets * css * flag-icon.css <-- main css file * img * flags <-- here i put the svg assets. * 1x1 * 4x3 Now in the flag-icon.css change the url src from "../flags/...." --> "../img/flags/..." After this angular.json under assets, make sure "src/assets" is included in the assets propery and finaly in your index.html add: <link rel="stylesheet" href="assets/css/flag-icon.css"> This will make sure the build folder is neat and structured, and you can use the css selectors throughout your application. Also this fixed the aspect ratio for me.. Hope this helps

kerem commented

2026-03-03 14:37:25 +03:00

Author

Owner

@BenDevelopment commented on GitHub (Jan 11, 2019):

I found a workaround for this, however you cannot use npm this way. After I got the flag-icon-css package all my ratios were wrong (1x1) and I could not fix it. After looking into the style that got loaded in i did not see an indication of 4x3 or 1x1, just the name of the file.

After a closer look it had put all the flags into the root of my build folder. To fix this I just downloaded the css file and got all the flags in the correct folder, so both 1x1 and 4x3. These i put in the assets folder.

So you get:

src

assets

css

flag-icon.css <-- main css file

img

flags <-- here i put the svg assets.

1x1

4x3

Now in the flag-icon.css change the url src from "../flags/...." --> "../img/flags/..."

After this angular.json under assets, make sure "src/assets" is included in the assets propery and finaly in your index.html add:

This will make sure the build folder is neat and structured, and you can use the css selectors throughout your application. Also this fixed the aspect ratio for me..

Hope this helps

Thank you @o-arslan, this is a good solution but it will break the npm link as you said. No more npm update :(.
Another problem is that it will add css and flags img in source control.

@BenDevelopment commented on GitHub (Jan 11, 2019): > I found a workaround for this, however you cannot use npm this way. After I got the flag-icon-css package all my ratios were wrong (1x1) and I could not fix it. After looking into the style that got loaded in i did not see an indication of 4x3 or 1x1, just the name of the file. > > After a closer look it had put all the flags into the root of my build folder. To fix this I just downloaded the css file and got all the flags in the correct folder, so both 1x1 and 4x3. These i put in the assets folder. > > So you get: > > * src > > * assets > > * css > > * flag-icon.css <-- main css file > * img > > * flags <-- here i put the svg assets. > > * 1x1 > * 4x3 > > Now in the flag-icon.css change the url src from "../flags/...." --> "../img/flags/..." > > After this angular.json under assets, make sure "src/assets" is included in the assets propery and finaly in your index.html add: > > This will make sure the build folder is neat and structured, and you can use the css selectors throughout your application. Also this fixed the aspect ratio for me.. > > Hope this helps Thank you @o-arslan, this is a good solution but it will break the npm link as you said. No more npm update :(. Another problem is that it will add css and flags img in source control.

kerem commented

2026-03-03 14:37:25 +03:00

Author

Owner

@Amakaev commented on GitHub (Mar 29, 2022):

@BenDevelopment the only way i be able to make it to present flag-icons.min.css as assets as well as svg's
Add following instruction to angular.json

    "assets": [
        {
            "glob": "**/*",
            "input": "./node_modules/flag-icons/flags",
            "output": "assets/flags"
        },
        {
            "glob": "**/*",
            "input": "./node_modules/flag-icons/css",
            "output": "assets/flags"
        }
    ]

And add direct link <link href="assets/flags/flag-icons.min.css" rel="stylesheet"> to index.html

@Amakaev commented on GitHub (Mar 29, 2022): @BenDevelopment the only way i be able to make it to present flag-icons.min.css as assets as well as svg's Add following instruction to `angular.json` ``` "assets": [ { "glob": "**/*", "input": "./node_modules/flag-icons/flags", "output": "assets/flags" }, { "glob": "**/*", "input": "./node_modules/flag-icons/css", "output": "assets/flags" } ] ``` And add direct link `<link href="assets/flags/flag-icons.min.css" rel="stylesheet">` to `index.html`