Switch messages icons to SVG (#6124)

client/scss/components/_messages.scss

@@ -31,31 +31,23 @@
         vertical-align: middle;
     }
 
+    &-icon {
+        vertical-align: text-top;
+        margin-right: 0.5em;
+        width: 1.5em;
+        height: 1.5em;
+    }
+
     .error {
         background-color: $color-red-dark;
-
-        &:before {
-            font-family: wagtail;
-            content: map-get($icons, 'warning');
-        }
     }
 
     .warning {
         background-color: $color-orange-dark;
-
-        &:before {
-            font-family: wagtail;
-            content: map-get($icons, 'warning');
-        }
     }
 
     .success {
         background-color: $color-green-dark;
-
-        &:before {
-            font-family: wagtail;
-            content: map-get($icons, 'success');
-        }
     }
 
     .success .button:hover {

wagtail/admin/templates/wagtailadmin/base.html

@@ -31,7 +31,15 @@
                 {% if messages %}
                     <ul>
                         {% for message in messages %}
-                            <li class="{% message_tags message %}">{{ message|safe }}</li>
+                            <li class="{% message_tags message %}">
+                              {% if message.level_tag == "error" %}
+                                {# There is no error icon, use warning icon instead #}
+                                {% icon name="warning" class_name="messages-icon" %}
+                              {% else %}
+                                {% icon name=message.level_tag class_name="messages-icon" %}
+                              {% endif %}
+                              {{ message|safe }}
+                            </li>
                         {% endfor %}
                     </ul>
                 {% endif %}