From 928794ea1f8f4a1f907607b9e821d211b14c6092 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Thu, 12 Mar 2026 13:54:46 -0700
Subject: [PATCH] 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>
---
 .../backups/templates/backups_repository.html      |  2 +-
 .../backups/templates/verify_ssh_hostkey.html      |  2 +-
 plinth/modules/help/templates/help_contribute.html |  3 ++-
 .../upgrades/templates/upgrades_configure.html     |  3 ++-
 plinth/templates/clients-button.html               |  2 +-
 static/themes/default/css/main.css                 | 14 +++++---------
 6 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/plinth/modules/backups/templates/backups_repository.html b/plinth/modules/backups/templates/backups_repository.html
index 74b4151e4..f0463d7a5 100644
--- a/plinth/modules/backups/templates/backups_repository.html
+++ b/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>
diff --git a/plinth/modules/backups/templates/verify_ssh_hostkey.html b/plinth/modules/backups/templates/verify_ssh_hostkey.html
index 99de68946..92a73600e 100644
--- a/plinth/modules/backups/templates/verify_ssh_hostkey.html
+++ b/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>
diff --git a/plinth/modules/help/templates/help_contribute.html b/plinth/modules/help/templates/help_contribute.html
index 745bb60b1..0921803ee 100644
--- a/plinth/modules/help/templates/help_contribute.html
+++ b/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>
 
diff --git a/plinth/modules/upgrades/templates/upgrades_configure.html b/plinth/modules/upgrades/templates/upgrades_configure.html
index 2c705ba86..fc6a9b511 100644
--- a/plinth/modules/upgrades/templates/upgrades_configure.html
+++ b/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>
 
diff --git a/plinth/templates/clients-button.html b/plinth/templates/clients-button.html
index ae8832ff8..20f1cf28f 100644
--- a/plinth/templates/clients-button.html
+++ b/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 %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 5ab3853d4..95ecc7ffb 100644
--- a/static/themes/default/css/main.css
+++ b/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 */