feat: add Pagination option to customize arrow icons

Similar to https://github.com/zurb/foundation-sites/pull/11025

> It make me think that we should have these options for every component where it could be useful to customize them, for lrt/rtl support and design customization (with a custom webfont for example).

diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
index 7b18a3136dd4fc646c31d1cbc27957878fe87928..2c952fa8aa031814036a95266f21fe4f5b8a6089 100644 (file)
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@@ -65,6 +65,14 @@ $pagination-mobile-current-item: false !default;
 /// @type Boolean
 $pagination-arrows: true !default;
 
+/// Content for the previous arrow when `$pagination-arrows` is `true`
+/// @type String
+$pagination-arrow-previous: '\00AB' !default;
+
+/// Content for the next arrow when `$pagination-arrows` is `true`
+/// @type String
+$pagination-arrow-next: '\00BB' !default;
+
 /// Adds styles for a pagination container. Apply this to a `<ul>`.
 @mixin pagination-container (
   $margin-bottom: $pagination-margin-bottom,
@@ -180,14 +188,14 @@ $pagination-arrows: true !default;
     .pagination-previous.disabled::before {
       display: inline-block;
       margin-#{$global-right}: 0.5rem;
-      content: '\00ab';
+      content: $pagination-arrow-previous;
     }
 
     .pagination-next a::after,
     .pagination-next.disabled::after {
       display: inline-block;
       margin-#{$global-left}: 0.5rem;
-      content: '\00bb';
+      content: $pagination-arrow-next;
     }
   }
 }