ui: Use inline SVG icons for breadcrumbs

Tests:

- The home icon appears as before in breadcrumb in light/dark themes.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/templates/breadcrumbs.html

@@ -2,6 +2,8 @@
 # SPDX-License-Identifier: AGPL-3.0-or-later
 {% endcomment %}
 
+{% load plinth_extras %}
+
 <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
     {% for url, breadcrumb in breadcrumbs.items reversed %}
@@ -13,7 +15,7 @@
         <li class="breadcrumb-item">
           <a href="{{ url }}">
             {% if breadcrumb.url_name == 'index' %}
-              <span class="fa fa-home"></span>
+              {% icon 'home' %}
             {% else %}
               {{ breadcrumb.name }}
             {% endif %}

static/themes/default/css/main.css

@@ -533,8 +533,8 @@ footer {
     --bs-breadcrumb-divider: ">";
 }
 
-.breadcrumb-item .fa-home {
-    font-size: 1.5rem;
+.breadcrumb-item .svg-icon {
+    font-size: 1.25rem;
 }
 
 .breadcrumb-item + .breadcrumb-item::before {