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

@@ -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>

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>

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>