Change arrow colors in ng-bootstrap carousel

Question

I'm creating carousel with ng-bootstrap, I want to change arrow colors or image from white to black cause i have white background images and they are invisible. My problem is that i can't get span, i don't know how to call this in scss. I'm using bootstrap 4 and ng-bootstrap for angular https://ng-bootstrap.github.io/#/components/carousel/examples. When i change image url in console it works. I was trying to get arrows directly but nothing happens.

My code:

<div class="col-lg-6">
      <div class="imageCarousel">
        <ng-container *ngIf="product.images">
          <ngb-carousel>
            <ng-template id="imageSlide" ngbSlide *ngFor="let image of product.images | slice: 1">
              <img [src]="image">

            </ng-template>

          </ngb-carousel>
        </ng-container>
      </div>
    </div>

scss:

.imageCarousel {
        max-height: 500px;
        text-align: center;
        color: $color2;
        .carousel .slide {
            width: 50px;
            height: 50px;
            background-image: url("https://storage.googleapis.com/staging.pc-shop-260af.appspot.com/ic_keyboard_arrow_right_black_24px.svg");
        }

        img {
            // border: 2px solid blue;
            max-width: 100%;
            max-height: 400px;
        }
    }

Answer 1

ngb-carousel use SVG images as controls, you can override that with your own image of prev and next button:

.carousel-control-prev-icon{
   background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}