Flag-icon-css showing only square flags in Angular 2+ (8)

user_8052908 0
Viewed 3596

I would like to use the flag-icon-css library in my Angular 8 project. I've managed to import it and the flags are showing, however, they are only displaying as squares. How do I get them to display as rectangles?

I installed the library through npm and added this code to my global styles file (per this answer: Can angular cli use flag icon css?):

$flag-icon-css-path: '~flag-icon-css/flags' !default;
@import "~flag-icon-css/sass/flag-icon";

This is the code I use in my template:

<span class="flag-icon flag-icon-us"></span>

I am not using the flag-icon-squared class. Still, the flag is only displayed as a square.

EDIT (Added to clarify):

If I increase the width of the span, the span widens, but not the flag itself. I also tried using flag-icon-background, with the same result.

enter image description here

I checked the svg image itself, and it is a rectangle, however, I noticed that it also has a lot of whitespace on its left side. So that might be causing the issue - the span is displaying the whitespace and only part of the flag.

I'd appreciate any suggestions!

angular css
4 Answers

The reason this is happening is because the 1x1 and 4x3 ratio SVGs are being copied to the root folder after a build - you can see if this you view the style of the icon and hover over the background image URL. The 1x1 images are being used by the CSS which is why the flags are always square - I'm not sure why this was not an issue in Angular 7.

A work around is to manually copy the images into your assets folder and manually update the CSS to point to your assets folder. The downside is that you will have to manually update the CSS every time you update the npm package.

See here: https://github.com/lipis/flag-icon-css/issues/514

user_18207600

I've recently has the same problem.

I overcame this by renaming the SVG files and redirecting the paths referenced in the styling files.

Specifically, you can see the changes I made here: https://github.com/nunnsy/flag-icon-css/commit/2eabbda9daf6a53627a7d4952eae0d1164bb04fc

This is by no means a long-term fix, I just needed a quick hack personally and figured someone else may want some guidance.

I understand Angular was copying the files and overwriting the 3x4 with the 1x1 due to them having the same name (separated by folder), hence the renaming out of the folder with the size now in the file name: XY_xx.svg

Even trying to reconfigure image hashing did not solve my issue - if someone has a way of implementing this, I'd appreciate to know how you implemented it. Or, any other solution, I'll be watching this question.

user_12275840

I'm experiencing the same issue in debug mode but not for a production build. So if it's an issue you do not want to spend a lot of time on, know that it won't exist in a production environment, building with the --prod flag solves it.

user_66093040

If you don't need square ones

Fast ugly hack: change the names of folders 1x1 and 3x4

I think it is correct to download images bypassing npm

user_131071520
Related