title: Flag-icon-css showing only square flags in Angular 2+ (8)
body: <p>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?</p>
  
  <p>I installed the library through npm and added this code to my global styles file (per this answer: <a href="https://stackoverflow.com/questions/42275057/can-angular-cli-use-flag-icon-css">Can angular cli use flag icon css?</a>):</p>
  
  <pre><code>$flag-icon-css-path: '~flag-icon-css/flags' !default;
  @import "~flag-icon-css/sass/flag-icon";
  </code></pre>
  
  <p>This is the code I use in my template:</p>
  
  <pre><code>&lt;span class="flag-icon flag-icon-us"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>I am not using the <code>flag-icon-squared</code> class. Still, the flag is only displayed as a square.</p>
  
  <p>EDIT (Added to clarify): </p>
  
  <p>If I increase the width of the span, the span widens, but not the flag itself. I also tried using <code>flag-icon-background</code>, with the same result.</p>
  
  <p><a href="https://i.stack.imgur.com/FmfOp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FmfOp.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>I'd appreciate any suggestions!</p>