feat(icons): dynamic icons via CDN with favicon fallbacks; expose config in /api/config

Author: karam-ajaj

app.py

@@ -461,10 +461,16 @@ def index():
 @app.route('/api/config')
 def get_config():
     """Return dashboard configuration"""
+    icon_dynamic = config.get('icons', {}).get('dynamic', {})
     return jsonify({
         'title': config['dashboard']['title'],
         'default_theme': config['dashboard']['default_theme'],
-        'refresh_interval': config['traefik']['refresh_interval']
+        'refresh_interval': config['traefik']['refresh_interval'],
+        'icon_dynamic': {
+            'enabled': bool(icon_dynamic.get('enabled', False)),
+            'base_url': icon_dynamic.get('base_url', ''),
+            'extension': icon_dynamic.get('extension', '.svg')
+        }
     })
 
 @app.route('/api/routes')

static/index.html

@@ -180,7 +180,17 @@
             text-decoration: none;
             color: inherit;
             transition: transform 0.2s ease, box-shadow 0.2s ease;
+            position: relative;
+            overflow: hidden;
         }
+        .route-icon-img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            display: none;
+        }
+        .route-icon-img.is-visible { display: block; }
+        .route-icon-fallback { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; }
 
         .route-card--link:hover {
             transform: translateY(-3px);
@@ -398,7 +408,8 @@ <h1>
         // Configuration
         let config = {
             refresh_interval: 5,
-            default_theme: 'dynamic'
+            default_theme: 'dynamic',
+            icon_dynamic: { enabled: false, base_url: '', extension: '.svg' }
         };
 
         // State
@@ -564,21 +575,20 @@ <h2>No Routes Found</h2>
             `;
 
             container.innerHTML = html;
-            setupIconFallbacks();
+            initializeIcons();
         }
 
         // Create route card HTML
         function createRouteCard(route) {
             const icon = iconMap[route.icon] || iconMap['mdi:web'];
-            const fallbackIcon = escapeHtml(icon);
-            const iconUrl = route.iconUrl ? escapeAttribute(route.iconUrl) : '';
-            const iconAlt = escapeAttribute(`${route.name} icon`);
+            const candidates = buildIconCandidates(route);
+            const dataset = candidates.map(escapeAttribute).join('|');
             const statusDotClass = route.status === 'enabled' ? '' : (route.status === 'disabled' ? ' error' : ' warning');
 
             const iconMarkup = `
-                <div class="route-icon">
-                    ${iconUrl ? `<img src="${iconUrl}" alt="${iconAlt}" class="route-icon-img" loading="lazy" decoding="async" referrerpolicy="no-referrer" />` : ''}
-                    <div class="route-icon-fallback">${fallbackIcon}</div>
+                <div class="route-icon" data-fallback-emoji="${escapeAttribute(icon)}">
+                    <img class="route-icon-img" data-icon-candidates="${dataset}" alt="${escapeAttribute(route.name || 'icon')}">
+                    <div class="route-icon-fallback">${escapeHtml(icon)}</div>
                 </div>
             `;
 
@@ -683,26 +693,70 @@ <h2>Error Loading Routes</h2>
                 .replace(/>/g, '&gt;');
         }
 
-        function setupIconFallbacks() {
-            document.querySelectorAll('.route-icon-img').forEach(img => {
-                const evaluateState = () => {
-                    if (img.naturalWidth === 0 || img.naturalHeight === 0) {
-                        img.remove();
-                    } else {
-                        img.classList.add('is-visible');
-                    }
-                };
+        function buildIconCandidates(route) {
+            const candidates = [];
+            const dyn = config.icon_dynamic || {};
+            const base = dyn.base_url || '';
+            const ext = dyn.extension || '.svg';
+
+            const names = [];
+            const svc = (route.service || '').toString();
+            const name = (route.name || '').toString();
+            const cleaned = s => s
+                .replace(/@.*$/, '')
+                .replace(/-(http|https)$/i, '')
+                .replace(/[^a-z0-9]+/gi, '-')
+                .replace(/^-+|-+$/g, '')
+                .toLowerCase();
+
+            if (svc) names.push(cleaned(svc));
+            if (name) names.push(cleaned(name));
+
+            const uniq = Array.from(new Set(names));
+
+            if (dyn.enabled && base) {
+                uniq.forEach(slug => {
+                    candidates.push(`${base}${slug}${ext}`);
+                    candidates.push(`${base}${slug}.png`);
+                    candidates.push(`${base}${slug}.webp`);
+                });
+            }
 
-                if (img.complete) {
-                    evaluateState();
-                } else {
-                    img.addEventListener('load', () => {
-                        img.classList.add('is-visible');
-                    }, { once: true });
-                    img.addEventListener('error', () => {
-                        img.remove();
-                    }, { once: true });
+            if (route.url) {
+                try {
+                    const u = new URL(route.url);
+                    candidates.push(`https://icon.horse/icon/${u.hostname}`);
+                    candidates.push(`${u.origin}/favicon.ico`);
+                } catch {}
+            }
+
+            return candidates;
+        }
+
+        function initializeIcons() {
+            document.querySelectorAll('img[data-icon-candidates]').forEach(img => {
+                const list = (img.getAttribute('data-icon-candidates') || '').split('|').filter(Boolean);
+                if (list.length === 0) {
+                    return; // fallback emoji remains
                 }
+                let i = 0;
+                const tryNext = () => {
+                    if (i >= list.length) {
+                        img.removeAttribute('src');
+                        return;
+                    }
+                    img.src = list[i++];
+                };
+                img.addEventListener('error', tryNext);
+                img.addEventListener('load', () => {
+                    img.classList.add('is-visible');
+                    const parent = img.closest('.route-icon');
+                    if (parent) {
+                        const fallback = parent.querySelector('.route-icon-fallback');
+                        if (fallback) fallback.style.display = 'none';
+                    }
+                });
+                tryNext();
             });
         }