Change Arrow Colors in Bootstraps Carousel

body {  background: skyblue !important;}
span.carousel-control-next-icon {  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");}
span.carousel-control-prev-icon {  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">  <div class="row">    <div class="col-md-2">    </div>    <div class="col-md-8">      <ngb-carousel id="carousel_1" #carousel="ngbCarousel" class="text-lg-center" #myCarousel="ngbCarousel" showNavigationArrows="true" interval="2500" pauseOnHover="false">        <ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">          <div class="picsum-img-wrapper">            <img [src]="image" alt="Random first slide" style=" max-height:300px; margin:0 auto;">          </div>          <div class="carousel-caption">            <h6>{{titles[i]}}</h6>          </div>          <a class="carousel-control-prev" href="#carousel_1" data-slide="prev">            <span class="carousel-control-prev-icon"></span>          </a>          <a class="carousel-control-next" href="#carousel_1" data-slide="next">            <span class="carousel-control-next-icon"></span>          </a>        </ng-template>      </ngb-carousel>    </div>    <div class="col-md-2">    </div>  </div></div>

Change Bootstrap 4 Carousel Control Colors

There's no need for any unnecessary css hacks.

If you want to modify any Bootstrap css (or the carousel control colors in particular), you can easily do that.

Here are the rules that control the color of the carousel controls:

.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");
}

.carousel-control-next-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='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

Replace the fff in the fill='%23fff' parts with the hex code of the desired color.

Here's a working code snippet where fill='%23fff' has been replaced with fill='%23f00' for red instead of white:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    <style>.carousel-control-prev-icon {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' 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");}
.carousel-control-next-icon {    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");}</style>
<div class="container">    <div class="row">        <div class="col">            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">                <div class="carousel-inner">                    <div class="carousel-item active">                        <img class="d-block w-100" src="https://placeimg.com/800/400/animals" alt="First slide">                    </div>                    <div class="carousel-item">                        <img class="d-block w-100" src="https://placeimg.com/800/400/arch" alt="Second slide">                    </div>                    <div class="carousel-item">                        <img class="d-block w-100" src="https://placeimg.com/800/400/nature" alt="Third slide">                    </div>                </div>                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>                    <span class="sr-only">Previous</span>                </a>                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">                    <span class="carousel-control-next-icon" aria-hidden="true"></span>                    <span class="sr-only">Next</span>                </a>            </div>        </div>    </div></div>