title: How to set fill color for svg rect
body: <p>I have the following icon in svg, which contain a rect.
  I need to color in red (now they are in white).
  With my current CSS solution I am not able to get the result wanted.
  Any idea how to fix it?</p>
  
  <p>Notes this question is different from other because it related to rect only and not path.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.icon rect {
    fill: red;
  }
  
  html {
    background-color: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="icon"&gt;
    &lt;svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
        &lt;g transform="translate(-28.000000, -26.000000)" stroke-width="2" stroke="#FFFFFF"&gt;
          &lt;rect x="43" y="27" width="1" height="18"&gt;&lt;/rect&gt;
          &lt;rect x="29" y="27" width="1" height="18"&gt;&lt;/rect&gt;
        &lt;/g&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>