ui: Use inline SVG icons for all collapse buttons

Tests:

- All the icons appear as before in both light/dark themes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/modules/backups/templates/backups_repository.html

@@ -13,7 +13,7 @@
           <div  class="d-sm-flex flex-sm-row">
             <div class="flex-sm-grow-1 lh-lg collapsible-button"
                  data-bs-toggle="collapse" data-bs-target="#{{ uuid }}">
-              <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+              {% icon 'chevron-right' %}
               {% if repository.error %}
                 <span title={{ repository.error }}>
                   {% icon 'exclamation-triangle' %}</span>

plinth/modules/backups/templates/verify_ssh_hostkey.html

@@ -43,7 +43,7 @@
         <p>
           <a class="btn btn-default collapsed collapsible-button"
              data-bs-toggle="collapse" href="#help" aria-expanded="false">
-            <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+            {% icon 'chevron-right' %}
             {% trans "How to verify?" %}
           </a>
         </p>

plinth/modules/help/templates/help_contribute.html

@@ -4,6 +4,7 @@
 {% endcomment %}
 
 {% load i18n %}
+{% load plinth_extras %}
 
 {% block content %}
   <h2>{% trans "Contribute" %}</h2>
@@ -55,7 +56,7 @@
     <a class="btn btn-default collapsed collapsible-button" role="button"
        data-bs-toggle="collapse" href="#collapse-issues" aria-expanded="false"
        aria-controls="collapse-issues">
-      <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+      {% icon 'chevron-right' %}
       {% trans "Show issues" %}
     </a>
 

plinth/modules/upgrades/templates/upgrades_configure.html

@@ -6,6 +6,7 @@
 {% load bootstrap %}
 {% load i18n %}
 {% load static %}
+{% load plinth_extras %}
 
 {% block status %}
   {{ block.super}}  {% comment %} To extend instead of overwrite {% endcomment %}
@@ -134,7 +135,7 @@
       <a class="btn btn-default collapsed collapsible-button" role="button"
          data-bs-toggle="collapse" href="#collapse-log" aria-expanded="false"
          aria-controls="collapse-log">
-        <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+        {% icon 'chevron-right' %}
         {% trans "Show recent update logs" %}
       </a>
 

plinth/templates/clients-button.html

@@ -21,7 +21,7 @@
     {% if client_platforms.web|length > 1 or client_platforms.other %}
       <button type="button" data-bs-toggle="collapse" data-bs-target="#clients"
               class="btn btn-default collapsed collapsible-button">
-        <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+        {% icon 'chevron-right' %}
         {% trans "Client Apps" %}
       </button>
     {% endif %}

static/themes/default/css/main.css

@@ -447,17 +447,13 @@ footer {
 }
 
 /* Icon when collapsible content is shown */
-.collapsible-button .fa {
-    margin-left: 0.3125rem;
+.collapsible-button.collapsed [data-icon-name="chevron-right"] {
+    transform: none;
 }
 
-.collapsible-button .fa-chevron-right:before,
-.no-js .collapsible-button.collapsed .fa-chevron-right:before {
-    content: "\f078";
-}
-
-.collapsible-button.collapsed .fa-chevron-right:before {
-    content: "\f054";
+.collapsible-button [data-icon-name="chevron-right"],
+.no-js .collapsible-button.collapsed [data-icon-name="chevron-right"] {
+    transform: rotate(0.25turn);
 }
 
 /* No-JS fallbacks for collapsible content */