From 60c5e5d93d946b9d0b72a3d6edda2a206c4bc27e Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 08:45:03 -0500
Subject: [PATCH] refactor: switch server icon customization to use Remix Icon
 font

- Added Remix Icon CDN CSS (remixicon@4.5.0) to layout
- Replaced Heroicon components with Remix Icon font classes (ri-*)
- Using dynamic icon class binding in Alpine.js for modal grid
- Icon names updated to Remix format (e.g., server-line, github-line)
- Added more icons including gaming, OS, and brand icons
- Simplified icon rendering - no more individual template/x-if blocks
---
 .../Proxmox/views/components/layout.blade.php | 225 +++---------------
 1 file changed, 36 insertions(+), 189 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index c4ff9521e..53440fc5f 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -6,6 +6,11 @@
     'statusPollingInterval' => '30s',
 ])
 
+{{-- Remix Icons for server icon customization --}}
+@once
+<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
+@endonce
+
 @php
     $vmStatus = optional($status)->status;
     $pollSuffix = $statusPollingInterval ? '.' . $statusPollingInterval : '';
@@ -49,93 +54,9 @@
                             @php
                                 $iconStyle = $server->user_set_icon_color ? 'color: ' . $server->user_set_icon_color : '';
                             @endphp
-                            @switch($server->user_set_icon)
-                                @case('server')<x-heroicon-o-server class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('server-stack')<x-heroicon-o-server-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('computer-desktop')<x-heroicon-o-computer-desktop class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('cpu-chip')<x-heroicon-o-cpu-chip class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('circle-stack')<x-heroicon-o-circle-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('cloud')<x-heroicon-o-cloud class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('command-line')<x-heroicon-o-command-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('code-bracket')<x-heroicon-o-code-bracket class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('code-bracket-square')<x-heroicon-o-code-bracket-square class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('globe-alt')<x-heroicon-o-globe-alt class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('globe-americas')<x-heroicon-o-globe-americas class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('globe-europe-africa')<x-heroicon-o-globe-europe-africa class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('globe-asia-australia')<x-heroicon-o-globe-asia-australia class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('wifi')<x-heroicon-o-wifi class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('signal')<x-heroicon-o-signal class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('shield-check')<x-heroicon-o-shield-check class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('shield-exclamation')<x-heroicon-o-shield-exclamation class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('lock-closed')<x-heroicon-o-lock-closed class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('lock-open')<x-heroicon-o-lock-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('key')<x-heroicon-o-key class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('rocket-launch')<x-heroicon-o-rocket-launch class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('paper-airplane')<x-heroicon-o-paper-airplane class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('bolt')<x-heroicon-o-bolt class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('fire')<x-heroicon-o-fire class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('sparkles')<x-heroicon-o-sparkles class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('star')<x-heroicon-o-star class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('heart')<x-heroicon-o-heart class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('home')<x-heroicon-o-home class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('home-modern')<x-heroicon-o-home-modern class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('building-office')<x-heroicon-o-building-office class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('building-office-2')<x-heroicon-o-building-office-2 class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('building-storefront')<x-heroicon-o-building-storefront class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('cube')<x-heroicon-o-cube class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('cube-transparent')<x-heroicon-o-cube-transparent class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('archive-box')<x-heroicon-o-archive-box class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('inbox')<x-heroicon-o-inbox class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('inbox-stack')<x-heroicon-o-inbox-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('folder')<x-heroicon-o-folder class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('folder-open')<x-heroicon-o-folder-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('cog-6-tooth')<x-heroicon-o-cog-6-tooth class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('cog-8-tooth')<x-heroicon-o-cog-8-tooth class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('wrench-screwdriver')<x-heroicon-o-wrench-screwdriver class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('wrench')<x-heroicon-o-wrench class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('beaker')<x-heroicon-o-beaker class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('bug-ant')<x-heroicon-o-bug-ant class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('puzzle-piece')<x-heroicon-o-puzzle-piece class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('chart-bar')<x-heroicon-o-chart-bar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('chart-pie')<x-heroicon-o-chart-pie class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('presentation-chart-line')<x-heroicon-o-presentation-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('currency-dollar')<x-heroicon-o-currency-dollar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('currency-euro')<x-heroicon-o-currency-euro class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('banknotes')<x-heroicon-o-banknotes class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('credit-card')<x-heroicon-o-credit-card class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('user')<x-heroicon-o-user class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('user-circle')<x-heroicon-o-user-circle class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('user-group')<x-heroicon-o-user-group class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('users')<x-heroicon-o-users class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('envelope')<x-heroicon-o-envelope class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('envelope-open')<x-heroicon-o-envelope-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('chat-bubble-left')<x-heroicon-o-chat-bubble-left class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('chat-bubble-left-right')<x-heroicon-o-chat-bubble-left-right class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('camera')<x-heroicon-o-camera class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('video-camera')<x-heroicon-o-video-camera class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('film')<x-heroicon-o-film class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('musical-note')<x-heroicon-o-musical-note class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('book-open')<x-heroicon-o-book-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('document-text')<x-heroicon-o-document-text class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('sun')<x-heroicon-o-sun class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('moon')<x-heroicon-o-moon class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('swatch')<x-heroicon-o-swatch class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('paint-brush')<x-heroicon-o-paint-brush class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('trophy')<x-heroicon-o-trophy class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('academic-cap')<x-heroicon-o-academic-cap class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('light-bulb')<x-heroicon-o-light-bulb class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('finger-print')<x-heroicon-o-finger-print class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('eye')<x-heroicon-o-eye class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('map')<x-heroicon-o-map class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('map-pin')<x-heroicon-o-map-pin class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('clock')<x-heroicon-o-clock class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('calendar')<x-heroicon-o-calendar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('gift')<x-heroicon-o-gift class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('cake')<x-heroicon-o-cake class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @default<x-heroicon-o-server class="size-5 text-base/60 transition-transform group-hover:scale-110" />
-                            @endswitch
+                            <i class="ri-{{ $server->user_set_icon }} text-xl transition-transform group-hover:scale-110" style="{{ $iconStyle }}"></i>
                         @else
-                            <x-heroicon-o-server class="size-5 text-base/60 transition-transform group-hover:scale-110" />
+                            <i class="ri-server-line text-xl text-base/60 transition-transform group-hover:scale-110"></i>
                         @endif
                     </button>
                     <span class="text-2xl font-bold">
@@ -1006,22 +927,27 @@
             selectedColor: @entangle('selectedIconColor'),
             searchQuery: '',
             icons: [
-                'server', 'server-stack', 'computer-desktop', 'cpu-chip', 'circle-stack',
-                'cloud', 'command-line', 'code-bracket', 'code-bracket-square',
-                'globe-alt', 'globe-americas', 'globe-europe-africa', 'globe-asia-australia',
-                'wifi', 'signal', 'shield-check', 'shield-exclamation', 'lock-closed', 'lock-open', 'key',
-                'rocket-launch', 'paper-airplane', 'bolt', 'fire', 'sparkles', 'star', 'heart',
-                'home', 'home-modern', 'building-office', 'building-office-2', 'building-storefront',
-                'cube', 'cube-transparent', 'archive-box', 'inbox', 'inbox-stack', 'folder', 'folder-open',
-                'cog-6-tooth', 'cog-8-tooth', 'wrench-screwdriver', 'wrench', 'beaker', 'bug-ant', 'puzzle-piece',
-                'chart-bar', 'chart-pie', 'presentation-chart-line',
-                'currency-dollar', 'currency-euro', 'banknotes', 'credit-card',
-                'user', 'user-circle', 'user-group', 'users',
-                'envelope', 'envelope-open', 'chat-bubble-left', 'chat-bubble-left-right',
-                'camera', 'video-camera', 'film', 'musical-note',
-                'book-open', 'document-text', 'sun', 'moon', 'swatch', 'paint-brush',
-                'trophy', 'academic-cap', 'light-bulb', 'finger-print', 'eye',
-                'map', 'map-pin', 'clock', 'calendar', 'gift', 'cake'
+                'server-line', 'database-2-line', 'computer-line', 'cpu-line', 'hard-drive-2-line',
+                'cloud-line', 'terminal-box-line', 'code-s-slash-line', 'braces-line',
+                'global-line', 'earth-line', 'wifi-line', 'signal-tower-line',
+                'shield-check-line', 'shield-keyhole-line', 'lock-line', 'lock-unlock-line', 'key-2-line',
+                'rocket-line', 'rocket-2-line', 'send-plane-line', 'flashlight-line', 'fire-line',
+                'sparkling-line', 'star-line', 'heart-line', 'home-line', 'home-2-line',
+                'building-line', 'building-2-line', 'store-line', 'box-3-line', 'archive-line',
+                'inbox-line', 'inbox-2-line', 'folder-line', 'folder-open-line',
+                'settings-3-line', 'settings-4-line', 'tools-line', 'hammer-line',
+                'flask-line', 'bug-line', 'puzzle-line', 'bar-chart-box-line', 'pie-chart-line',
+                'line-chart-line', 'money-dollar-circle-line', 'money-euro-circle-line',
+                'bank-card-line', 'wallet-line', 'user-line', 'user-3-line', 'group-line', 'team-line',
+                'mail-line', 'mail-open-line', 'chat-3-line', 'discuss-line',
+                'camera-line', 'vidicon-line', 'film-line', 'music-line',
+                'book-open-line', 'file-text-line', 'sun-line', 'moon-line',
+                'palette-line', 'brush-line', 'trophy-line', 'graduation-cap-line',
+                'lightbulb-line', 'fingerprint-line', 'eye-line', 'map-2-line', 'map-pin-line',
+                'time-line', 'calendar-line', 'gift-line', 'cake-2-line',
+                'gamepad-line', 'ghost-line', 'aliens-line', 'space-ship-line',
+                'android-line', 'apple-line', 'windows-line', 'ubuntu-line',
+                'github-line', 'gitlab-line', 'discord-line', 'slack-line'
             ],
             colors: [
                 '', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
@@ -1063,7 +989,7 @@
                         <div class="flex items-center justify-between mb-4">
                             <h3 class="text-lg font-semibold">Customize Server Icon</h3>
                             <button @click="$wire.closeIconModal()" class="text-base/50 hover:text-base transition-colors">
-                                <x-heroicon-o-x-mark class="size-5" />
+                                <i class="ri-close-line text-xl"></i>
                             </button>
                         </div>
                         <!-- Search -->
@@ -1079,12 +1005,12 @@
                             <div class="size-16 rounded-xl bg-background-secondary border-2 border-neutral flex items-center justify-center"
                                  :style="selectedColor ? 'border-color: ' + selectedColor : ''">
                                 <template x-if="selectedIcon">
-                                    <span x-html="document.querySelector('[data-icon-preview=\'' + selectedIcon + '\']')?.innerHTML || ''"
-                                          class="size-8"
-                                          :style="selectedColor ? 'color: ' + selectedColor : ''"></span>
+                                    <span class="size-8 flex items-center justify-center" :style="selectedColor ? 'color: ' + selectedColor : ''">
+                                        <i class="text-3xl" :class="'ri-' + selectedIcon"></i>
+                                    </span>
                                 </template>
                                 <template x-if="!selectedIcon">
-                                    <x-heroicon-o-server class="size-8 text-base/40" />
+                                    <i class="ri-server-line text-3xl text-base/40"></i>
                                 </template>
                             </div>
                             <div>
@@ -1117,88 +1043,9 @@
                                         class="aspect-square rounded-lg border flex items-center justify-center transition-all duration-150 hover:bg-background hover:border-primary/50"
                                         :class="selectedIcon === icon ? 'bg-primary/10 border-primary ring-2 ring-primary/30' : 'border-neutral'"
                                         :data-icon-preview="icon">
-                                    <template x-if="icon === 'server'"><x-heroicon-o-server class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'server-stack'"><x-heroicon-o-server-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'computer-desktop'"><x-heroicon-o-computer-desktop class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'cpu-chip'"><x-heroicon-o-cpu-chip class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'circle-stack'"><x-heroicon-o-circle-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'cloud'"><x-heroicon-o-cloud class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'command-line'"><x-heroicon-o-command-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'code-bracket'"><x-heroicon-o-code-bracket class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'code-bracket-square'"><x-heroicon-o-code-bracket-square class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'globe-alt'"><x-heroicon-o-globe-alt class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'globe-americas'"><x-heroicon-o-globe-americas class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'globe-europe-africa'"><x-heroicon-o-globe-europe-africa class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'globe-asia-australia'"><x-heroicon-o-globe-asia-australia class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'wifi'"><x-heroicon-o-wifi class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'signal'"><x-heroicon-o-signal class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'shield-check'"><x-heroicon-o-shield-check class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'shield-exclamation'"><x-heroicon-o-shield-exclamation class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'lock-closed'"><x-heroicon-o-lock-closed class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'lock-open'"><x-heroicon-o-lock-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'key'"><x-heroicon-o-key class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'rocket-launch'"><x-heroicon-o-rocket-launch class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'paper-airplane'"><x-heroicon-o-paper-airplane class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'bolt'"><x-heroicon-o-bolt class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'fire'"><x-heroicon-o-fire class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'sparkles'"><x-heroicon-o-sparkles class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'star'"><x-heroicon-o-star class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'heart'"><x-heroicon-o-heart class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'home'"><x-heroicon-o-home class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'home-modern'"><x-heroicon-o-home-modern class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'building-office'"><x-heroicon-o-building-office class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'building-office-2'"><x-heroicon-o-building-office-2 class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'building-storefront'"><x-heroicon-o-building-storefront class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'cube'"><x-heroicon-o-cube class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'cube-transparent'"><x-heroicon-o-cube-transparent class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'archive-box'"><x-heroicon-o-archive-box class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'inbox'"><x-heroicon-o-inbox class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'inbox-stack'"><x-heroicon-o-inbox-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'folder'"><x-heroicon-o-folder class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'folder-open'"><x-heroicon-o-folder-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'cog-6-tooth'"><x-heroicon-o-cog-6-tooth class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'cog-8-tooth'"><x-heroicon-o-cog-8-tooth class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'wrench-screwdriver'"><x-heroicon-o-wrench-screwdriver class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'wrench'"><x-heroicon-o-wrench class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'beaker'"><x-heroicon-o-beaker class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'bug-ant'"><x-heroicon-o-bug-ant class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'puzzle-piece'"><x-heroicon-o-puzzle-piece class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'chart-bar'"><x-heroicon-o-chart-bar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'chart-pie'"><x-heroicon-o-chart-pie class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'presentation-chart-line'"><x-heroicon-o-presentation-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'currency-dollar'"><x-heroicon-o-currency-dollar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'currency-euro'"><x-heroicon-o-currency-euro class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'banknotes'"><x-heroicon-o-banknotes class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'credit-card'"><x-heroicon-o-credit-card class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'user'"><x-heroicon-o-user class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'user-circle'"><x-heroicon-o-user-circle class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'user-group'"><x-heroicon-o-user-group class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'users'"><x-heroicon-o-users class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'envelope'"><x-heroicon-o-envelope class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'envelope-open'"><x-heroicon-o-envelope-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'chat-bubble-left'"><x-heroicon-o-chat-bubble-left class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'chat-bubble-left-right'"><x-heroicon-o-chat-bubble-left-right class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'camera'"><x-heroicon-o-camera class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'video-camera'"><x-heroicon-o-video-camera class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'film'"><x-heroicon-o-film class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'musical-note'"><x-heroicon-o-musical-note class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'book-open'"><x-heroicon-o-book-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'document-text'"><x-heroicon-o-document-text class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'sun'"><x-heroicon-o-sun class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'moon'"><x-heroicon-o-moon class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'swatch'"><x-heroicon-o-swatch class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'paint-brush'"><x-heroicon-o-paint-brush class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'trophy'"><x-heroicon-o-trophy class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'academic-cap'"><x-heroicon-o-academic-cap class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'light-bulb'"><x-heroicon-o-light-bulb class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'finger-print'"><x-heroicon-o-finger-print class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'eye'"><x-heroicon-o-eye class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'map'"><x-heroicon-o-map class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'map-pin'"><x-heroicon-o-map-pin class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'clock'"><x-heroicon-o-clock class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'calendar'"><x-heroicon-o-calendar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'gift'"><x-heroicon-o-gift class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'cake'"><x-heroicon-o-cake class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <span class="size-5 flex items-center justify-center" :style="selectedColor ? 'color: ' + selectedColor : ''">
+                                        <i class="text-xl" :class="'ri-' + icon"></i>
+                                    </span>
                                 </button>
                             </template>
                         </div>