Change Background/Color of Transition Arrows? about ngx-gallery

[lukasz-galka]

You can override default styles using /deep/ operator.

ngx-gallery /deep/ .ngx-gallery-icon {
  color: red;
  background: blue;
}

[german-e-mas]

I've read that these operators are going to be deprecated in the future. You can read about it in the Angular Component Style Guide. Something to keep in mind.

[TonganJedi]

I had hoped there would be an alternative way to get to these, but until they come up with a replacement for this, it'll have to do.

[german-e-mas]

I used a hacky workaround to solve this (mainly because I tend to shy away from /deep/).

As my project required using Material Font instead of Font Awesome, I made a custom font with just the characters required for the gallery (there are free websites that can do this).

Inside that font's CSS, I included a circle-icon class. Then, in the gallery, I passed the arrows as: arrowNextIcon: 'gallery-arrow-right circle-icon', where "gallery-arrow-right" is my custom font.

Here's the result (with a white background)

[lukasz-galka]

Hi @german-e-mas, you are right with deep. @TonganJedi would you like option like iconStyle, for example options.iconStyle = 'color: red; background: blue' ?

[blessingk]

I would like to add a delete functionality using an icon but am not sure how to do it here <ngx-gallery [options]="galleryOptions" [images]="galleryImages">