title: Change color of SVG background-image (Bootstrap 4 carousel)
body: <p>I have a BS 4 carousel with next/prev controls which works so far. I have a light background so I would like to change the color of the controls (currently white).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="carouselQuotes" class="carousel slide quotecaru" data-ride="carousel"&gt;
  &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#carouselQuotes" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#carouselQuotes" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carouselQuotes" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;div class="carousel-inner"&gt;
      ... carousel items ...
  &lt;/div&gt;
  &lt;a class="carousel-control-prev" href="#carouselQuotes" role="button" data-slide="prev"&gt;
      &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="carousel-control-next" href="#carouselQuotes" role="button" data-slide="next"&gt;
      &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>Changing the color of the indicators was easy since that's simply set with a colour as their background. But setting background-color or color for the prev/next controls didn't change the color of the actual control icon.</p>
  
  <p>I found that the icons are set via background-image SVG. There is a part of it stating the fill color:</p>
  
  <pre><code>.carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  }
  </code></pre>
  
  <p>I tried</p>
  
  <pre><code>.carousel-control-prev-icon, .carousel-control-next-icon {
      fill: #000;
  }
  .carousel-control-prev-icon, .carousel-control-next-icon {
      fill: '#000';
  }
  .carousel-control-prev-icon, .carousel-control-next-icon {
      fill: '%23000';
  }
  </code></pre>
  
  <p>Is there a way to change the color of the icon without overriding the entire background-image line?</p>
  
  <p>Thank you</p>