title: Why is CSS mask-image not working with no-repeat?
body: <p>I have a SVG and I'd like to change its color to red on some event, but you can't do that with SVG as a background-image, so you have to use CSS <code>image-mask</code>. I'm using PHP to echo my CSS onto the style attribute of the div:</p>
  
  <pre><code>$jfid = "background-color:red;
          -webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg);
           mask-image:url(../like_icons/" . $iconfgg . ".svg)"; 
  </code></pre>
  
  <p>Like
  <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>.buttonlikee {
      background: transparent;
      outline: none;
      border: none;
      margin-left: 10px;
      transition: 0.8s all ease
  }
  .ts{
    width: 34px;
    height: 32px;
    background-color:red;
    -webkit-mask-image:url(https://svgshare.com/i/CB7.svg);
    mask-image:url(https://svgshare.com/i/CB7.svg) 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="buttonlikee"&gt;
    &lt;div class="ts"&gt;&lt;/div&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works as expected but returns a repeated image of the same SVG. So the solution would be to add <code>no-repeat</code> at last like this:</p>
  
  <pre><code>$jfid = "background-color:red;
           -webkit-mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat;
           mask-image:url(../like_icons/" . $iconfgg . ".svg) no-repeat"; 
  </code></pre>
  
  <p>This in return gives me a div full of red color and  you can't see the icon like <br><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>.buttonlikee {
      background: transparent;
      outline: none;
      border: none;
      margin-left: 10px;
      transition: 0.8s all ease
  }
  .ts{
    width: 34px;
    height: 32px;
    background-color:red;
    -webkit-mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat;
    mask-image:url(https://svgshare.com/i/CB7.svg) no-repeat
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="buttonlikee"&gt;
    &lt;div class="ts"&gt;&lt;/div&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is this a bug? What could be the solution?</p>