Does adding a custom icon for the carousel icon only affect the fullscreen version?

[Tcox-int]

Hello,

I've added custom prevIcon and nextIcon svgs to the render function, but it only seems to change the arrows in the full screen carousel when I click into the image. The svg icons on the actual carousel within the page are unchanged. Do those use a different icon call? I tried buttonNext and buttonPrev but those didn't work either.

render={{
  buttonPrev: photos.length <= 1 ? () => null : undefined,
  buttonNext: photos.length <= 1 ? () => null : undefined,
  iconPrev: () => <LeftArrow />,
  iconNext: () => <RightArrow />,
}}

[Tcox-int]

I also tried this

render={{
  iconPrev: () => <LeftArrow />,
  iconNext: () => <RightArrow />,
  buttonPrev: photos.length <= 1 ? () => null : <LeftArrow />,
  buttonNext: photos.length <= 1 ? () => null : <RightArrow />,
}}

[igordanchenko]

Please share a minimal repro. You can use the following sandbox as a template.

https://stackblitz.com/edit/yet-another-react-lightbox-sandbox?file=src%2FApp.tsx

[igordanchenko]

@Tcox-int without seeing a reproducible example, I can only assume you are using 2 Lightbox instances, so you need to specify custom icons in both.

[Tcox-int]

And that was exactly it. I didn't know there was a second instance. That was the hint I needed. Thanks!