use different way for bootstrap icons

templates/call_to_action.html

@@ -25,16 +25,10 @@
           href="{{ button.href | default('#') }}"
           class="btn btn-{{ button.theme | default('primary') }} my-2 d-inline-flex"
         >
-          {{ button.text }}
           {% if button.icon %}
-          <svg
-            class="bi"
-            width="{{ button.icon.width }}"
-            height="{{ button.icon.height }}"
-          >
-            <use xlink:href="#{{ button.icon.name }}"/>
-          </svg>
+          <i class="bi-{{ button.icon }}"></i>
           {% endif %}
+          {{ button.text }}
         </a>
         {% endfor %}
       </p>

templates/card.html

@@ -8,7 +8,7 @@
         data-bs-placement="top"
         data-bs-title="Add a reaction"
       >
-        <i class="bi bi-heart-fill" style="font-size: 1rem; color: pink;"></i>
+        <i class="bi-heart-fill" style="font-size: 1rem; color: pink;"></i>
       </a>
     </div>
 
@@ -30,7 +30,7 @@
         {% for reaction in reactions %}
         {# TODO: limit total number of reactions shown #}
       <span class="badge rounded-pill">
-        <svg class="bi" width="1rem" height="1rem"><use xlink:href="#{{ reaction }}" /></svg>
+        <i class="bi-{{ reaction }}"></i>
       </span>
         {% endfor %}
       {% endif %}

templates/navbar.html

@@ -10,6 +10,7 @@
     n. (list index)
       - href | yes | none
       - text | yes | none
+      - icon | no | none
     ... (etc)
 -->
 <header data-bs-theme="{{ theme | default('dark') }}">
@@ -29,13 +30,7 @@
               {% if link.href and link.text %}
             <li><a href={{ link.href }} class="text-{{ text_theme | default('white') }}">
               {% if link.icon %}
-              <svg
-                class="bi"
-                width="{{ link.icon.width }}"
-                height="{{ link.icon.height }}"
-              >
-                <use xlink:href="#{{ link.icon.name }}"/>
-              </svg>
+              <i class="bi-{{ link.icon }}"></i>
               {% endif %}
               {{ link.text }}
             </a></li>