how to change the color of icon in carousel?

Question

I develop a function for carousel, I want to change the color of the icon (next-icon and previous-icon), is it possible? and thnak's (i work with Angular 5)

file.html:

 <ngb-carousel [interval]="3000"> 
      <ng-template ngbSlide> ...  </ng-template>
      <ng-template ngbSlide> ...  </ng-template>
 </ngb-carousel>

_carousel.css:

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: $carousel-control-icon-width;
  height: $carousel-control-icon-width;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}
.carousel-control-prev-icon {
  background-image: $carousel-control-prev-icon-bg;
}
.carousel-control-next-icon {
  background-image: $carousel-control-next-icon-bg;
}

_variable.css:

$carousel-control-color:            $white !default;
$carousel-control-width:            15% !default;
$carousel-control-opacity:          .5 !default;

$carousel-indicator-width:          30px !default;
$carousel-indicator-height:         3px !default;
$carousel-indicator-spacer:         3px !default;
$carousel-indicator-active-bg:      $white !default;

$carousel-caption-width:            70% !default;
$carousel-caption-color:            $white !default;

$carousel-control-icon-width:       20px !default;

$carousel-control-prev-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default;
$carousel-control-next-icon-bg:     str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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"), "#", "%23") !default;

$carousel-transition:               transform .6s ease !default;

If you are using ng-bootstrap's carousel, they are using an image for the icon. If you want to change the you will have to use another background image for `carousel-control-prev-icon` class — Senal, Jan 28 '19 at 08:59
@Senal, i change background image in line **$carousel-control-prev-icon-bg** , i use : str-replace(url("../../../img/icon.png), "#", "%23") !default; . but the same don't change — adam90, Jan 28 '19 at 09:08

Senal · Accepted Answer · 2019-01-28T10:01:42.773

The styles specified in @Component metadata apply only within the template of that component. They are not inherited by any components nested within the template nor by any content projected into the component.

Since ngb-carousel is a nested component inside of your component, you have to include the css in your global css file.

.carousel-control-prev-icon {

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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");
}

Or else you can use ::ng-deep if you are adding styles from one of your component

::ng-deep .carousel-control-prev-icon {

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' 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");
}

Checkout this working stackblitz

FYI, ::ng-deep is deprecated but it's still there in angular. Check this out.

how to change the color of icon in carousel?

1 Answers1