[GH-ISSUE #706] Only 1x1 ration showing...

kerem commented

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

Owner

Originally created by @Spiff77 on GitHub (Apr 19, 2020).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/706

Hello, I only have the 1x1 flag appearing... Am I doing wrong? I am using angular 9:
Capture d’écran 2020-04-19 à 11 22 27

<span *ngFor="let lang of languages" (click)="frame.show()" class="flag-icon flag-icon-{{lang.isocode}}"></span>

I installed using standard npm install
Thanks.

UPDATE
I replaced the pics from the 3x4 folder into the 1x1 folder and now it work.. i have no idea why it charge the wrong folder....

Originally created by @Spiff77 on GitHub (Apr 19, 2020). Original GitHub issue: https://github.com/lipis/flag-icons/issues/706 Hello, I only have the 1x1 flag appearing... Am I doing wrong? I am using angular 9: <img width="268" alt="Capture d’écran 2020-04-19 à 11 22 27" src="https://user-images.githubusercontent.com/600608/79684253-204a4200-8230-11ea-844b-e833aaeb4d30.png"> <img width="649" alt="Capture d’écran 2020-04-19 à 11 22 32" src="https://user-images.githubusercontent.com/600608/79684254-20e2d880-8230-11ea-9981-6913f317f518.png"> ` <span *ngFor="let lang of languages" (click)="frame.show()" class="flag-icon flag-icon-{{lang.isocode}}"></span> ` I installed using standard npm install Thanks. **UPDATE** I replaced the pics from the 3x4 folder into the 1x1 folder and now it work.. i have no idea why it charge the wrong folder....

kerem closed this issue

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

kerem commented

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

Author

Owner

@Spiff77 commented on GitHub (Apr 20, 2020):

this is what is generated for in my in the inspector( AD for example)
.flag-icon-ad { background-image: url('ad.svg'); } .flag-icon-ad.flag-icon-squared { background-image: url('ad.svg'); }

@Spiff77 commented on GitHub (Apr 20, 2020): this is what is generated for in my <style></style> in the inspector( AD for example) ` .flag-icon-ad { background-image: url('ad.svg'); } .flag-icon-ad.flag-icon-squared { background-image: url('ad.svg'); } `

kerem commented

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

Author

Owner

@Findus23 commented on GitHub (Apr 20, 2020):

Very random guess:
Do you use something like webpack and have it set up to e.g. store all assets in one directory like /filename.extension?hash=something?
Then you might be overwriting the 3x4 files with the 1x1 files on build as they have the same filename.

@Findus23 commented on GitHub (Apr 20, 2020): Very random guess: Do you use something like webpack and have it set up to e.g. store all assets in one directory like `/filename.extension?hash=something`? Then you might be overwriting the 3x4 files with the 1x1 files on build as they have the same filename.

kerem commented

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

Author

Owner

@Spiff77 commented on GitHub (Apr 20, 2020):

@Findus23 Thanks for you answer, the thing is I am not doing anything special: Angular 9 standard conf and material design. the only thing I have is the angular.json...

@Spiff77 commented on GitHub (Apr 20, 2020): @Findus23 Thanks for you answer, the thing is I am not doing anything special: Angular 9 standard conf and material design. the only thing I have is the angular.json...

kerem commented

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

Author

Owner

@ghost commented on GitHub (Apr 23, 2020):

Did you inspect the flag item to see the computed properties?
I suppose there is strange behavior on background-size property.

I'm using ^3.4.6 version together Angular 9 and no special issues to report.

@ghost commented on GitHub (Apr 23, 2020): Did you inspect the flag item to see the computed properties? I suppose there is strange behavior on background-size property. I'm using **^3.4.6** version together Angular 9 and no special issues to report.

kerem commented

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

Author

Owner

@Spiff77 commented on GitHub (Apr 25, 2020):

Not a background property problem.. i try to deploy; all the ico are in the root folder :/

@Spiff77 commented on GitHub (Apr 25, 2020): Not a background property problem.. i try to deploy; all the ico are in the root folder :/

kerem commented

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

Author

Owner

@ghost commented on GitHub (Apr 27, 2020):

Very strange behavior; could you put a sample on plunker?

@ghost commented on GitHub (Apr 27, 2020): Very strange behavior; could you put a sample on plunker?

kerem commented

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

Author

Owner

@codevladimir commented on GitHub (May 2, 2020):

This is something that also happens to me. Using "@angular/core": "~9.1.3" it gives the 1x1.
An example of the styles with the inspect element

.flag-icon-us {
    background-image: url(us.svg);
}

.flag-icon {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
}

I didn't add any custom style.

@codevladimir commented on GitHub (May 2, 2020): This is something that also happens to me. Using ` "@angular/core": "~9.1.3"` it gives the 1x1. An example of the styles with the inspect element ``` .flag-icon-us { background-image: url(us.svg); } .flag-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; display: inline-block; width: 1.33333333em; line-height: 1em; } ``` I didn't add any custom style.

kerem commented

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

Author

Owner

@ghost commented on GitHub (May 5, 2020):

Very strange behavior; could you put a sample on plunker?

Never did that and didnt succefully put my whole project on it.

If you are able to reproduce the issue with "@angular/core": "~9.1.3" you can create an empty project with a flag-icon-css package and sample.

Thank you.

@ghost commented on GitHub (May 5, 2020): > > Very strange behavior; could you put a sample on plunker? > > Never did that and didnt succefully put my whole project on it. > If you are able to reproduce the issue with "@angular/core": "~9.1.3" you can create an empty project with a flag-icon-css package and sample. Thank you.

kerem commented

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

Author

Owner

@Spiff77 commented on GitHub (May 7, 2020):

Just deployed it, it's not a problem after a build...

@Spiff77 commented on GitHub (May 7, 2020): Just deployed it, it's not a problem after a build...

kerem commented

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

Author

Owner

@codevladimir commented on GitHub (May 9, 2020):

Very strange behavior; could you put a sample on plunker?

Never did that and didnt succefully put my whole project on it.
This is something that also happens to me. Using "@angular/core": "~9.1.3" it gives the 1x1.
An example of the styles with the inspect element
.flag-icon-us {
    background-image: url(us.svg);
}

.flag-icon {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
}
I didn't add any custom style.
What OS are you using?

I am using ubuntu. I didn't tried to build the project and see if it's somehow fixed, but while it is on serve, it is still showing as 1x1

@codevladimir commented on GitHub (May 9, 2020): > > Very strange behavior; could you put a sample on plunker? > > Never did that and didnt succefully put my whole project on it. > > > This is something that also happens to me. Using ` "@angular/core": "~9.1.3"` it gives the 1x1. > > An example of the styles with the inspect element > > ``` > > .flag-icon-us { > > background-image: url(us.svg); > > } > > > > .flag-icon { > > background-size: contain; > > background-position: 50%; > > background-repeat: no-repeat; > > position: relative; > > display: inline-block; > > width: 1.33333333em; > > line-height: 1em; > > } > > ``` > > > > > > I didn't add any custom style. > > What OS are you using? I am using ubuntu. I didn't tried to build the project and see if it's somehow fixed, but while it is on serve, it is still showing as 1x1

kerem commented

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

Author

Owner

@Spiff77 commented on GitHub (May 12, 2020):

@codevladimir Osx Here.
Anyway, would recommend not really taking care of it during dev since it work on deployment. you can replace put the content of 4X3 into 1X1 folder if you need to do css adjustments meawhile

@Spiff77 commented on GitHub (May 12, 2020): @codevladimir Osx Here. Anyway, would recommend not really taking care of it during dev since it work on deployment. you can replace put the content of 4X3 into 1X1 folder if you need to do css adjustments meawhile

kerem commented

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

Author

Owner

@ssougnez commented on GitHub (Jun 29, 2020):

Hi, I had the same issue and the problem comes from the fact that the structure of the icons is not kept during the compilation. "flags/1x1/ru.svg" and "flags/4x3/ru.svg" will both fo into the "dist" directory. The difference between dev and prod mode is that prod mode adds an hash to the filename, so there will be a "ru.foo.svg" and a "ru.bar.svg" while in dev it will be "ru.svg" for both and therefore, the second (so the 1x1, because is appears in second in the CSS) will override the first one.

So indeed, this issue only occurs in dev mode and has noting to do with this library :-) Can be closed in my opinion.

Cheers

@ssougnez commented on GitHub (Jun 29, 2020): Hi, I had the same issue and the problem comes from the fact that the structure of the icons is not kept during the compilation. "flags/1x1/ru.svg" and "flags/4x3/ru.svg" will both fo into the "dist" directory. The difference between dev and prod mode is that prod mode adds an hash to the filename, so there will be a "ru.foo.svg" and a "ru.bar.svg" while in dev it will be "ru.svg" for both and therefore, the second (so the 1x1, because is appears in second in the CSS) will override the first one. So indeed, this issue only occurs in dev mode and has noting to do with this library :-) Can be closed in my opinion. Cheers

kerem commented

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

Author

Owner

@KingDarBoja commented on GitHub (Jul 3, 2020):

Facing same issue but already read several SO posts regarding the problem and possible fix. As long as it is only in dev mode, it is okay I guess.

@KingDarBoja commented on GitHub (Jul 3, 2020): Facing same issue but already read several SO posts regarding the problem and possible fix. As long as it is only in dev mode, it is okay I guess.

kerem commented

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

Author

Owner

@bytelabsco commented on GitHub (Jul 10, 2020):

Was having the same issue, and these comments led me to this solution when using this library with Angular during development (ng serve).

Add the following to your angular.json file under projects -> {{your project}} -> architect -> build -> options:

"outputHashing": "all"

and that should create the correct file hashes, which will give you separate 3x4 and 1x1 images.

@bytelabsco commented on GitHub (Jul 10, 2020): Was having the same issue, and these comments led me to this solution when using this library with Angular during development (ng serve). Add the following to your angular.json file under projects -> {{your project}} -> architect -> build -> options: `"outputHashing": "all"` and that should create the correct file hashes, which will give you separate 3x4 and 1x1 images.

kerem commented

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

Author

Owner

@BeMacized commented on GitHub (Dec 27, 2020):

I'm still running into this issue with Angular 11.0 when running in development mode, even when setting "outputHashing": "all".

Not sure if it was possible on earlier versions, but with 11.0 setting this option seems to be useless when running in dev mode:

Warning: 'outputHashing' option is disabled when using the dev-server.

I added the following script to my package json as a workaround:

{
  ...
  "scripts": {
    ...
    "postinstall": "rm -rf ./node_modules/flag-icon-css/flags/1x1 && cp -r ./node_modules/flag-icon-css/flags/4x3 ./node_modules/flag-icon-css/flags/1x1"
  },
  ...
}

It works, but I wouldn't really call it a solution.

@BeMacized commented on GitHub (Dec 27, 2020): I'm still running into this issue with Angular 11.0 when running in development mode, even when setting `"outputHashing": "all"`. Not sure if it was possible on earlier versions, but with 11.0 setting this option seems to be useless when running in dev mode: ``` Warning: 'outputHashing' option is disabled when using the dev-server. ``` I added the following script to my package json as a workaround: ``` { ... "scripts": { ... "postinstall": "rm -rf ./node_modules/flag-icon-css/flags/1x1 && cp -r ./node_modules/flag-icon-css/flags/4x3 ./node_modules/flag-icon-css/flags/1x1" }, ... } ``` It works, but I wouldn't really call it a solution.

Rows
Columns

[GH-ISSUE #706] Only 1x1 ration showing... #370