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

Question

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.

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!

Answer 1

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