Use SVG icon in homepage's site summary items

CHANGELOG.txt

@@ -32,6 +32,7 @@ Changelog
  * Add borders to TypedTableBlock to help visualize rows and columns (Scott Cranfill)
  * Set default submit button label on generic create views to 'Create' instead of 'Save' (Matt Westcott)
  * Improve display of image listing for long image titles (Krzysztof Jeziorny)
+ * Use SVG icons in admin home page site summary items (Jérôme Lebleu)
  * Fix: Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast (Sakshi Uppoor)
  * Fix: Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
  * Fix: `default_app_config` deprecations for Django >= 3.2 (Tibor Leupold)

docs/releases/2.16.md

@@ -35,6 +35,7 @@
  * Add borders to TypedTableBlock to help visualize rows and columns (Scott Cranfill)
  * Set default submit button label on generic create views to 'Create' instead of 'Save' (Matt Westcott)
  * Improve display of image listing for long image titles (Krzysztof Jeziorny)
+ * Use SVG icons in admin home page site summary items (Jérôme Lebleu)
 
 ### Bug fixes
 

wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss

@@ -50,7 +50,8 @@ header {
             margin-bottom: 2em;
         }
 
-        li:before {
+        li.icon::before,
+        li svg.icon {
             opacity: 0.2;
             font-size: 6em;
             float: left;
@@ -74,6 +75,12 @@ header {
             }
         }
 
+        li svg.icon {
+            width: 1em;
+            height: 1em;
+            margin-right: 0.5em;
+        }
+
         a {
             position: relative;
             display: block;

wagtail/admin/templates/wagtailadmin/home/site_summary_pages.html

@@ -1,6 +1,7 @@
 {% load i18n wagtailadmin_tags %}
 
-<li class="icon icon-doc-empty-inverse">
+<li>
+    {% icon name="doc-empty-inverse" %}
     <a href="{% url 'wagtailadmin_explore' root_page.pk %}">
         {% blocktrans count counter=total_pages with total_pages|intcomma as total %}
             <span>{{ total }}</span> Page <span class="visuallyhidden">created in {{ site_name }}</span>

wagtail/documents/templates/wagtaildocs/homepage/site_summary_documents.html

@@ -1,6 +1,7 @@
 {% load i18n wagtailadmin_tags %}
 
-<li class="icon icon-doc-full-inverse">
+<li>
+    {% icon name="doc-full-inverse" %}
     <a href="{% url 'wagtaildocs:index' %}">
     {% blocktrans count counter=total_docs with total_docs|intcomma as total %}
         <span>{{ total }}</span> Document <span class="visuallyhidden">created in {{ site_name }}</span>

wagtail/images/templates/wagtailimages/homepage/site_summary_images.html

@@ -1,6 +1,7 @@
 {% load i18n wagtailadmin_tags %}
 
-<li class="icon icon-image">
+<li>
+    {% icon name="image" %}
     <a href="{% url 'wagtailimages:index' %}">
     {% blocktrans count counter=total_images with total_images|intcomma as total %}
         <span>{{ total }}</span> Image <span class="visuallyhidden">created in {{ site_name }}</span>