Use Icons instead of string text for buttons about nuka-carousel HOT 3 OPEN

You can use a few different approaches via the defaultControlsConfig prop to achieve what you want.

You can modify defaultControlsConfig.prevButtonText and defaultControlsConfig.nextButtonText like so to get a basic implementation:
https://codesandbox.io/s/admiring-lewin-zlwmj9?file=/src/App.js:376-453

If you want to use an image or change the font size, etc., the following are also available:

nextButtonClassName
nextButtonStyle
prevButtonClassName
prevButtonStyle

from nuka-carousel.

The properties you want to use for the left/right controls are: "renderCenterLeftControls" and "renderCenterRightControls". These allow you to create custom controls which could be images, svgs, or any HTML element. You can also customize the pagination controls in a similar manner using "renderBottomCenterControls".

from nuka-carousel.

@RaresTDumitrica you can do that by modifying the defaultControlsConfig as specified by @fritz-c previously. But you can also add Icon component instead of string also. Here is the litlle code

import Carousel from "nuka-carousel"
import NavigateNextIcon from '@mui/icons-material/NavigateNext'
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'

const defaultControlsConfig = {
    nextButtonText : React.ReactNode = <NavigateNextIcon />,
    prevButtonText: React.ReactNode = <ArrowBackIosNewIcon/>
}

<Carousel autoplay wrapAround defaultControlsConfig={defaultControlsConfig}> {Your images} </Carousel>

You can review my code where I have implemented that (in my nextjs application) here it is 👉 https://github.com/satyadalei/igit-mca-frontend/blob/main/src/components/hero/Carousel.jsx

from nuka-carousel.