Update pagination icons to use SVGs (#6573)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -5,6 +5,7 @@ Changelog
 ~~~~~~~~~~~~~~~~~
 
  * Added support for Python 3.9
+ * Switch pagination icons to use SVG instead of icon fonts (Scott Cranfill)
  * Fix: Stop menu icon overlapping the breadcrumb on small viewport widths in page editor (Karran Besen)
  * Fix: Make sure document chooser pagination preserves the selected collection when moving between pages (Alex Sa)
 

docs/releases/2.12.rst

@@ -15,6 +15,7 @@ Other features
 ~~~~~~~~~~~~~~
 
  * Added support for Python 3.9
+ * Switch pagination icons to use SVG instead of icon fonts (Scott Cranfill)
 
 
 Bug fixes

wagtail/admin/templates/wagtailadmin/pages/listing/_pagination.html

@@ -11,12 +11,18 @@ Pagination for page listings. Used by the `{% paginate %}` template tag.
     <ul>
         <li class="prev">
             {% if page.has_previous %}
-                <a data-page="{{ page.previous_page_number }}" href="{{ base_url }}{% pagination_querystring page.previous_page_number page_key=page_key %}" class="icon icon-arrow-left {{ classnames }}">{% trans "Previous" %}</a>
+                <a data-page="{{ page.previous_page_number }}" href="{{ base_url }}{% pagination_querystring page.previous_page_number page_key=page_key %}" class="{{ classnames }}">
+                    {% icon name="arrow-left" class_name="default" %}
+                    {% trans "Previous" %}
+                </a>
             {% endif %}
         </li>
         <li class="next">
             {% if page.has_next %}
-                <a data-page="{{ page.next_page_number }}" href="{{ base_url }}{% pagination_querystring page.next_page_number page_key=page_key %}" class="icon icon-arrow-right-after {{ classnames }}">{% trans "Next" %}</a>
+                <a data-page="{{ page.next_page_number }}" href="{{ base_url }}{% pagination_querystring page.next_page_number page_key=page_key %}" class="{{ classnames }}">
+                    {% trans "Next" %}
+                    {% icon name="arrow-right" class_name="default" %}
+                </a>
             {% endif %}
         </li>
     </ul>

wagtail/admin/templates/wagtailadmin/shared/ajax_pagination_nav.html

@@ -6,12 +6,18 @@
     <ul>
         <li class="prev">
             {% if items.has_previous %}
-                <a href="#" data-page="{{ items.previous_page_number }}" class="icon icon-arrow-left">{% trans 'Previous' %}</a>
+                <a href="#" data-page="{{ items.previous_page_number }}">
+                    {% icon name="arrow-left" class_name="default" %}
+                    {% trans 'Previous' %}
+                </a>
             {% endif %}
         </li>
         <li class="next">
             {% if items.has_next %}
-                <a href="#" data-page="{{ items.next_page_number }}" class="icon icon-arrow-right-after">{% trans 'Next' %}</a>
+                <a href="#" data-page="{{ items.next_page_number }}">
+                    {% trans 'Next' %}
+                    {% icon name="arrow-right" class_name="default" %}
+                </a>
             {% endif %}
         </li>
     </ul>

wagtail/admin/templates/wagtailadmin/shared/pagination_nav.html

@@ -18,12 +18,18 @@
     <ul>
         <li class="prev">
             {% if items.has_previous %}
-                <a href="{{ url_to_use }}{% querystring p=items.previous_page_number %}" class="icon icon-arrow-left">{% trans 'Previous' %}</a>
+                <a href="{{ url_to_use }}{% querystring p=items.previous_page_number %}">
+                    {% icon name="arrow-left" class_name="default" %}
+                    {% trans 'Previous' %}
+                </a>
             {% endif %}
         </li>
         <li class="next">
             {% if items.has_next %}
-                <a href="{{ url_to_use }}{% querystring p=items.next_page_number %}" class="icon icon-arrow-right-after">{% trans 'Next' %}</a>
+                <a href="{{ url_to_use }}{% querystring p=items.next_page_number %}">
+                    {% trans 'Next' %}
+                    {% icon name="arrow-right" class_name="default" %}
+                </a>
             {% endif %}
         </li>
     </ul>

wagtail/contrib/modeladmin/templatetags/modeladmin_tags.py

@@ -101,11 +101,13 @@ def result_list(context):
 def pagination_link_previous(current_page, view):
     if current_page.has_previous():
         previous_page_number0 = current_page.previous_page_number() - 1
+        tpl = get_template('wagtailadmin/shared/icon.html')
+        icon_svg = tpl.render({'name': 'arrow-left', 'class_name': 'default'})
         return format_html(
-            '<li class="prev"><a href="%s" class="icon icon-arrow-left">%s'
-            '</a></li>' %
-            (view.get_query_string({view.PAGE_VAR: previous_page_number0}),
-                _('Previous'))
+            '<li class="prev"><a href="{}">{} {}</a></li>',
+            view.get_query_string({view.PAGE_VAR: previous_page_number0}),
+            icon_svg,
+            _('Previous')
         )
     return ''
 
@@ -114,11 +116,13 @@ def pagination_link_previous(current_page, view):
 def pagination_link_next(current_page, view):
     if current_page.has_next():
         next_page_number0 = current_page.next_page_number() - 1
+        tpl = get_template('wagtailadmin/shared/icon.html')
+        icon_svg = tpl.render({'name': 'arrow-right', 'class_name': 'default'})
         return format_html(
-            '<li class="next"><a href="%s" class="icon icon-arrow-right-after"'
-            '>%s</a></li>' %
-            (view.get_query_string({view.PAGE_VAR: next_page_number0}),
-                _('Next'))
+            '<li class="next"><a href="{}">{} {}</a></li>',
+            view.get_query_string({view.PAGE_VAR: next_page_number0}),
+            _('Next'),
+            icon_svg
         )
     return ''