How can I customize the size of navigation buttons in Swiper (Angular)

Question

In my current project, the Swiper navigation buttons are too large, but I don't know how to manipulate the size.

I've tried this in the styles.css file:

::ng-deep .swiper-button-prev:after,
::ng-deep .swiper-button-next:after {
    font-size: 20px;
}

But it doesn't work for me.

I know I can open the file swiper-bundle.css and correct this line:

:root {
  --swiper-navigation-size: 44px;
}

But this file is located inside a npm package, meaning changes made in that file is local only. I need to push my code to GitHub, so that solution doesn't count.

Answer 1

  <Swiper
                    style={{
                      "--swiper-navigation-color": "#000",
                      "--swiper-navigation-size": "25px",
                    }}
                    slidesPerView={matchesSmall ? 5 : 8}
                    spaceBetween={30}
                    centeredSlides={true}
                    freeMode={true}
                    navigation={false}
                    watchSlidesProgress={true}
                    modules={[FreeMode, Navigation]}
                  >
                   ...
                  </Swiper>

use style props