feat(navigation): new addIcons parameter to add SVG icons to nav buttons

fixes #8088
fixes #8087

Author: nolimits4web

src/modules/navigation/navigation.mjs

@@ -8,7 +8,7 @@ export default function Navigation({ swiper, extendParams, on, emit }) {
     navigation: {
       nextEl: null,
       prevEl: null,
-
+      addIcons: true,
       hideOnClick: false,
       disabledClass: 'swiper-button-disabled',
       hiddenClass: 'swiper-button-hidden',
@@ -109,8 +109,15 @@ export default function Navigation({ swiper, extendParams, on, emit }) {
 
     const initButton = (el, dir) => {
       if (el) {
-        if (el.matches('.swiper-button-next,.swiper-button-prev') && !el.querySelector('svg')) {
-          setInnerHTML(el, arrowSvg);
+        if (
+          params.addIcons &&
+          el.matches('.swiper-button-next,.swiper-button-prev') &&
+          !el.querySelector('svg')
+        ) {
+          const tempEl = document.createElement('div');
+          setInnerHTML(tempEl, arrowSvg);
+          el.appendChild(tempEl.querySelector('svg'));
+          tempEl.remove();
         }
         el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
       }

src/types/modules/navigation.d.ts

@@ -68,6 +68,13 @@ export interface NavigationOptions {
    */
   prevEl?: CSSSelector | HTMLElement | null;
 
+  /**
+   * Boolean property to add SVG icons to navigation buttons
+   *
+   * @default true
+   */
+  addIcons?: boolean;
+
   /**
    * Toggle navigation buttons visibility after click on Slider's container
    *