From 55be8f3763e8ce40c1e894a0a4993c7782e5c09d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Lebleu?=
 <jeromelebleu@users.noreply.github.com>
Date: Thu, 7 Oct 2021 10:18:39 +0200
Subject: [PATCH] Use SVG icon in homepage's site summary items

---
 CHANGELOG.txt                                            | 1 +
 docs/releases/2.16.md                                    | 1 +
 .../admin/static_src/wagtailadmin/scss/layouts/home.scss | 9 ++++++++-
 .../templates/wagtailadmin/home/site_summary_pages.html  | 3 ++-
 .../wagtaildocs/homepage/site_summary_documents.html     | 3 ++-
 .../wagtailimages/homepage/site_summary_images.html      | 3 ++-
 6 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 60222e6a3f..b7bec85976 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/docs/releases/2.16.md b/docs/releases/2.16.md
index bb39d8dc6d..33946b1790 100644
--- a/docs/releases/2.16.md
+++ b/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
 
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss
index 763dd473e3..c60dc3a62d 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss
+++ b/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;
diff --git a/wagtail/admin/templates/wagtailadmin/home/site_summary_pages.html b/wagtail/admin/templates/wagtailadmin/home/site_summary_pages.html
index 078a3ebe5d..b20243ac55 100644
--- a/wagtail/admin/templates/wagtailadmin/home/site_summary_pages.html
+++ b/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>
diff --git a/wagtail/documents/templates/wagtaildocs/homepage/site_summary_documents.html b/wagtail/documents/templates/wagtaildocs/homepage/site_summary_documents.html
index 66a7d5e440..8d4d5ba327 100644
--- a/wagtail/documents/templates/wagtaildocs/homepage/site_summary_documents.html
+++ b/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>
diff --git a/wagtail/images/templates/wagtailimages/homepage/site_summary_images.html b/wagtail/images/templates/wagtailimages/homepage/site_summary_images.html
index 460a73e18a..c68ddb44c1 100644
--- a/wagtail/images/templates/wagtailimages/homepage/site_summary_images.html
+++ b/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>