From bcc6bdc9223b7b4b6f71e50343718f47902cdbb0 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Thu, 12 Mar 2026 08:31:39 -0700
Subject: [PATCH] networks: Use inline SVG icons

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/networks/templates/connection_show.html   | 9 +++++----
 .../modules/networks/templates/connections_fields.html   | 3 ++-
 plinth/modules/networks/templates/connections_list.html  | 7 ++++---
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/plinth/modules/networks/templates/connection_show.html b/plinth/modules/networks/templates/connection_show.html
index 13ef82c6c..32a6d32f8 100644
--- a/plinth/modules/networks/templates/connection_show.html
+++ b/plinth/modules/networks/templates/connection_show.html
@@ -7,6 +7,7 @@
 {% load static %}
 {% load bootstrap %}
 {% load i18n %}
+{% load plinth_extras %}
 
 {% block page_head %}
   <link type="text/css" rel="stylesheet"
@@ -20,7 +21,7 @@
       {% if connection.primary %}
         <div class="alert alert-warning d-flex align-items-center" role="alert">
           <div class="me-2">
-            <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+            {% icon 'exclamation-triangle' %}
             <span class="visually-hidden">{% trans "Caution:" %}</span>
           </div>
           <div>
@@ -285,7 +286,7 @@
 
         <div class="alert alert-info d-flex align-items-center" role="alert">
           <div class="me-2">
-            <span class="fa fa-info-circle" aria-hidden="true"></span>
+            {% icon 'info-circle' %}
             <span class="visually-hidden">{% trans "Info:" %}</span>
           </div>
           <div>
@@ -310,7 +311,7 @@
 
         <div class="alert alert-info d-flex align-items-center" role="alert">
           <div class="me-2">
-            <span class="fa fa-info-circle" aria-hidden="true"></span>
+            {% icon 'info-circle' %}
             <span class="visually-hidden">{% trans "Info:" %}</span>
           </div>
           <div>
@@ -334,7 +335,7 @@
 
         <div class="alert alert-info d-flex align-items-center" role="alert">
           <div class="me-2">
-            <span class="fa fa-info-circle" aria-hidden="true"></span>
+            {% icon 'info-circle' %}
             <span class="visually-hidden">{% trans "Info:" %}</span>
           </div>
           <div>
diff --git a/plinth/modules/networks/templates/connections_fields.html b/plinth/modules/networks/templates/connections_fields.html
index dfaf56dfc..81208cf92 100644
--- a/plinth/modules/networks/templates/connections_fields.html
+++ b/plinth/modules/networks/templates/connections_fields.html
@@ -4,12 +4,13 @@
 
 {% load bootstrap %}
 {% load i18n %}
+{% load plinth_extras %}
 
 {% if form.non_field_errors %}
   <div class="alert alert-danger alert-dismissible
               d-flex align-items-center fade show">
     <div class="me-2">
-      <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+      {% icon 'exclamation-triangle' %}
       <span class="visually-hidden">{% trans "Error:" %}</span>
     </div>
     <div>
diff --git a/plinth/modules/networks/templates/connections_list.html b/plinth/modules/networks/templates/connections_list.html
index 83dd2a9e0..6d90acc2c 100644
--- a/plinth/modules/networks/templates/connections_list.html
+++ b/plinth/modules/networks/templates/connections_list.html
@@ -4,18 +4,19 @@
 
 {% load bootstrap %}
 {% load i18n %}
+{% load plinth_extras %}
 
   <h3>{% trans "Connections" %}</h3>
 
   <div class="btn-toolbar">
     <a href="{% url 'networks:scan' %}" class="btn btn-default"
        role="button" title="{% trans 'Nearby Wi-Fi Networks' %}">
-      <span class="fa fa-wifi" aria-hidden="true"></span>
+      {% icon 'wifi' %}
       {% trans "Nearby Wi-Fi Networks" %}
     </a>
     <a href="{% url 'networks:add' %}" class="btn btn-default"
        role="button" title="{% trans 'Add Connection' %}">
-      <span class="fa fa-plus" aria-hidden="true"></span>
+      {% icon 'plus' %}
       {% trans "Add Connection" %}
     </a>
   </div>
@@ -75,7 +76,7 @@
                    class="btn btn-default btn-sm"
                    role="button"
                    title="{% blocktrans with name=connection.name %}Delete connection {{ name }}{% endblocktrans %}">
-                  <span class="fa fa-trash-o" aria-hidden="true"></span>
+                  {% icon 'trash-o' %}
                 </a>
               {% endif %}
             </td>