Replace emoji UI icons with a shared SVG icon system.

Add an icons sprite and helpers so nav, actions, and protocol cards use consistent stroke icons.

Co-authored-by: Cursor <cursoragent@cursor.com>

templates/my_connections.html

@@ -1,11 +1,12 @@
 {% extends "base.html" %}
+{% from "macros/icons.html" import icon %}
 
 {% block title_extra %} — {{ _('my_connections_title') }}{% endblock %}
 
 {% block content %}
 <section>
     <h1 class="section-title">
-        <span class="icon">🔗</span>
+        <span class="icon">{{ icon('layers') }}</span>
         {{ _('my_connections_title') }}
     </h1>
 
@@ -14,11 +15,11 @@
         {% for c in connections %}
         <div class="client-item">
             <div class="client-info">
-                <div class="client-avatar">🔗</div>
+                <div class="client-avatar">{{ icon('link') }}</div>
                 <div>
                     <div class="client-name">{{ c.name or 'VPN Connection' }}</div>
                     <div class="client-meta">
-                        <span>🖥 {{ c.server_name }}</span>
+                        <span style="display:inline-flex;align-items:center;gap:4px;">{{ icon('server') }} {{ c.server_name }}</span>
                         <span class="badge badge-info" style="font-size:0.65rem;">
                             {{ 'AmneziaWG' if c.protocol == 'awg' else ('AmneziaWG 2.0' if c.protocol == 'awg2' else ('AWG Legacy' if c.protocol == 'awg_legacy' else
                             ('Xray' if c.protocol == 'xray' else c.protocol | upper))) }}
@@ -40,7 +41,7 @@
     </div>
     {% else %}
     <div class="empty-state">
-        <div class="empty-icon">🔗</div>
+        <div class="empty-icon">{{ icon('link') }}</div>
         <div class="empty-title">{{ _('no_connections') }}</div>
         <div class="empty-desc">{{ _('no_connections_user_desc') }}</div>
     </div>