title: Bootstrap 4 carousel-control-color conditional colors - SVG
body: <p>Im trying to get a different color for the rendered SVG icon using to control the carousel. </p>
  
  <p>I changed the default color for the arrows as follows:</p>
  
  <pre><code>$carousel-control-color:            $secondary !default;
  </code></pre>
  
  <p>This makes the arrows green as I intended to.
  But now I have a card with a primary background color and I want the arrows to have a white color inside this particular div. Because you can imagine, $primary color on $primary background is not really readable. </p>
  
  <p>I attemped to try a conditional logic to set the value of the variable but it doesn't override the value as I thought it would be.</p>
  
  <pre><code>.widget {
      &amp;.widget-support-slider {
          .carousel-control-prev-icon,
          .carousel-control-next-icon {
              @if $carousel-control-color == $primary{
                      $carousel-control-color: white;
                      color: $carousel-control-color;
                  }
  
          }
      }
  }
  </code></pre>
  
  <p>Corrosponding HTML</p>
  
  <pre><code>&lt;div class="card widget-card bg-primary text-light widget-support-slider mt-3"&gt;
  &lt;div class="card-header py-2"&gt;
      &lt;span class="text-primary"&gt;Lorem&lt;/span&gt; ipsum dolor sit
      &lt;div class="carousel-controls"&gt;
      &lt;a class="carousel-control-prev" href="#support-slider" 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;Vor&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="carousel-control-next" href="#support-slider" 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;Zurück&lt;/span&gt;
      &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="card-body p-0"&gt;
      ...
  &lt;/div&gt;&lt;!-- /.card-body --&gt;
  </code></pre>
  
  <p></p>
  
  <p>I've also tried to change the color or fill property, but none of these change the arrow colors. Is there a built-in function in the bootstrap sass that I have overlooked?</p>
  
  <p>Cheers.</p>
  
  <p>Bootstrap v4.1</p>