Add userbar action icons

client/scss/tools/_mixins.general.scss

@@ -106,10 +106,10 @@
     margin-right: 0.2em;
 }
 
-@mixin svg-icon ($size: 1.5em) {
+@mixin svg-icon ($size: 1.5em, $position: text-top) {
     width: $size;
     height: $size;
-    vertical-align: text-top;
+    vertical-align: $position;
 }
 
 // Applies given rules on hover, except for touch screens.

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -103,7 +103,7 @@ $positions: (
     height: auto;
 
     &-icon {
-        @include svg-icon(2.5em);
+        @include svg-icon(2em);
     }
 }
 
@@ -246,6 +246,13 @@ $positions: (
             color: $color-white;
             background-color: rgba(100, 100, 100, 0.15);
         }
+
+        &-icon {
+            @include svg-icon(1.1em, middle);
+            margin-right: 0.5em;
+            fill: currentColor;
+        }
+
     }
 
     .#{$namespace}-icon {
@@ -260,16 +267,17 @@ $positions: (
     }
 
     a,
-    input {
+    button {
         font-size: 14px !important;
         text-align: left;
-        padding: 0.8em 1.7em 0.8em 2.7em;
+        padding: 0.8em;
     }
 
-    input {
+    button {
         border: 0;
-        background: none;
         width: 100%;
+        background-color: transparent;
+        outline: none;
     }
 }
 

wagtail/admin/templates/wagtailadmin/userbar/base.html

@@ -10,6 +10,11 @@
                     <svg>
                         <defs>
                           {% include "wagtailadmin/icons/wagtail.svg" %}
+                          {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
+                          {% include "wagtailadmin/icons/edit.svg" %}
+                          {% include "wagtailadmin/icons/plus.svg" %}
+                          {% include "wagtailadmin/icons/tick.svg" %}
+                          {% include "wagtailadmin/icons/cross.svg" %}
                         </defs>
                     </svg>
                   </div>

wagtail/admin/templates/wagtailadmin/userbar/item_admin.html

@@ -1,8 +1,11 @@
 {% extends "wagtailadmin/userbar/item_base.html" %}
-{% load i18n  %}
+{% load i18n wagtailadmin_tags %}
 
 {% block item_content %}
-    <div class="wagtail-action wagtail-icon wagtail-icon-wagtail">
-        <a href="{% url 'wagtailadmin_home' %}" target="_parent" class="">{% trans 'Go to Wagtail admin' %}</a>
+    <div class="wagtail-action">
+        <a href="{% url 'wagtailadmin_home' %}" target="_parent">
+          {% icon name="wagtail-icon" class_name="wagtail-action-icon" %}
+          {% trans 'Go to Wagtail admin' %}
+        </a>
     </div>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/userbar/item_page_add.html

@@ -1,8 +1,11 @@
 {% extends "wagtailadmin/userbar/item_base.html" %}
-{% load i18n  %}
+{% load i18n wagtailadmin_tags %}
 
 {% block item_content %}
-    <div class="wagtail-action wagtail-icon wagtail-icon-plus">
-        <a href="{% url 'wagtailadmin_pages:add_subpage' self.page.id %}" target="_parent">{% trans 'Add a child page' %}</a>
+    <div class="wagtail-action">
+        <a href="{% url 'wagtailadmin_pages:add_subpage' self.page.id %}" target="_parent">
+          {% icon name="plus" class_name="wagtail-action-icon" %}
+          {% trans 'Add a child page' %}
+        </a>
     </div>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/userbar/item_page_approve.html

@@ -1,11 +1,14 @@
 {% extends "wagtailadmin/userbar/item_base.html" %}
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 
 {% block item_content %}
     <form action="{% url 'wagtailadmin_pages:approve_moderation' self.revision.id %}" target="_parent" method="post">
         {% csrf_token %}
-        <div class="wagtail-action wagtail-icon wagtail-icon-tick">
-            <input type="submit" value="{% trans 'Approve' %}" class="button" />
+        <div class="wagtail-action">
+          <button type="submit" value="{% trans 'Approve' %}" class="button">
+            {% icon name="tick" class_name="wagtail-action-icon" %}
+            {% trans 'Approve' %}
+          </button>
         </div>
     </form>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/userbar/item_page_edit.html

@@ -1,8 +1,11 @@
 {% extends "wagtailadmin/userbar/item_base.html" %}
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 
 {% block item_content %}
-    <div class="wagtail-action wagtail-icon wagtail-icon-edit">
-        <a href="{% url 'wagtailadmin_pages:edit' self.page.id %}" target="_parent">{% trans 'Edit this page' %}</a>
+    <div class="wagtail-action">
+        <a href="{% url 'wagtailadmin_pages:edit' self.page.id %}" target="_parent">
+          {% icon name="edit" class_name="wagtail-action-icon" %}
+          {% trans 'Edit this page' %}
+        </a>
     </div>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/userbar/item_page_explore.html

@@ -1,8 +1,11 @@
 {% extends "wagtailadmin/userbar/item_base.html" %}
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 
 {% block item_content %}
-    <div class="wagtail-action wagtail-icon wagtail-icon-folder-open-inverse">
-        <a href="{% url 'wagtailadmin_explore' self.parent_page.id %}" target="_parent">{% trans 'Show in Explorer' %}</a>
+    <div class="wagtail-action">
+        <a href="{% url 'wagtailadmin_explore' self.parent_page.id %}" target="_parent">
+          {% icon name="folder-open-inverse" class_name="wagtail-action-icon" %}
+          {% trans 'Show in Explorer' %}
+        </a>
     </div>
 {% endblock %}

wagtail/admin/templates/wagtailadmin/userbar/item_page_reject.html

@@ -1,11 +1,14 @@
 {% extends "wagtailadmin/userbar/item_base.html" %}
-{% load i18n %}
+{% load i18n wagtailadmin_tags %}
 
 {% block item_content %}
     <form action="{% url 'wagtailadmin_pages:reject_moderation' self.revision.id %}" target="_parent" method="post">
         {% csrf_token %}
-        <div class="wagtail-action wagtail-icon wagtail-icon-cross">
-            <input type="submit" value="{% trans 'Reject' %}" class="button" />
+        <div class="wagtail-action">
+          <button type="submit" value="{% trans 'Reject' %}" class="button">
+            {% icon name="cross" class_name="wagtail-action-icon" %}
+            {% trans 'Reject' %}
+          </button>
         </div>
     </form>
 {% endblock %}

wagtail/admin/tests/test_userbar.py

@@ -111,9 +111,15 @@ class TestUserbarAddLink(TestCase, WagtailTestUtils):
 
         # page allows subpages, so the 'add page' button should show
         expected_url = reverse('wagtailadmin_pages:add_subpage', args=(self.event_index.id, ))
-        expected_link = '<a href="%s" target="_parent">Add a child page</a>' \
-            % expected_url
-        self.assertContains(response, expected_link)
+        needle = f"""
+            <a href="{expected_url}" target="_parent">
+                <svg class="icon icon-plus wagtail-action-icon" aria-hidden="true" focusable="false">
+                    <use href="#icon-plus"></use>
+                </svg>
+                Add a child page
+            </a>
+            """
+        self.assertTagInHTML(needle, str(response.content))
 
     def test_page_disallowing_subpages(self):
         response = self.client.get(reverse('wagtailadmin_userbar_frontend', args=(self.business_child.id, )))