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!