Padding in Sass making Material UI icon disappear - reactjs

Question

I am creating an image slider in React. I'm using Material UI arrow icons as the left and right buttons.
Everything is working fine until I try and add padding.
Before adding the padding, I can see two white circles with my arrows. As soon as I add the padding, the white circles get bigger but the arrows inside disappear.
return (
<div className="container">
<div
className="slider"
style={{ transform: `translateX(-${currentSlide * 100}vw)` }}
>
<img src={images[0]} alt="" />
<img src={images[1]} alt="" />
<img src={images[2]} alt="" />
<img src={images[3]} alt="" />
</div>
<div className="arrows">
<KeyboardArrowLeftOutlinedIcon className="arrow" onClick={prevSlide} />
<KeyboardArrowRightOutlinedIcon className="arrow" onClick={nextSlide} />
</div>
</div>
)
And this is the sass file:
.container {
width: 100vw;
height: 60vh;
overflow: hidden;
position: relative;
.slider {
width: 400vw;
height: 100%;
display: flex;
transition: all 1s ease;
img {
width: 100vw;
height: 100%;
object-fit: cover;
}
}
.arrows {
position: absolute;
height: 100%;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
gap: 80%;
top: 0;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
padding: 1em;
}
}
}

Answer 1

It seems that a possible solution could be wrap the arrow icons with div, and style the wrapper.
Minimized demo of below example on: stackblitz (without functionality, and uses plain CSS)
Example:
<div className="arrows">
<div className="arrow">
<KeyboardArrowLeftOutlinedIcon />
</div>
<div className="arrow">
<KeyboardArrowRightOutlinedIcon />
</div>
</div>
Also some changes in Sass would be needed to match it, such as:
.arrows {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
margin: 0.75em;
padding: 0.5em;
display: flex;
justify-content: center;
align-items: center;
}
}