Fix component props silently ignored or misapplied in shared/ui (#2828)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: codecalm <1282324+codecalm@users.noreply.github.com>

shared/components/cards/RecentActivity.astro

@@ -1,5 +1,4 @@
 ---
-// Icon class is a literal template string (color token is not interpolated).
 import CardActions from '@ui/CardActions.astro'
 import Icon from '@ui/Icon.astro'
 import CardTitle from '@ui/CardTitle.astro'
@@ -23,7 +22,7 @@ const activity = crmDashboard.recent_activity
             <div class="row align-items-center">
               <div class="col-auto">
                 <span class={`avatar bg-${item.icon_color}-lt`}>
-                  <Icon name={item.icon} class={'icon text-{{ item.icon_color }}'} />
+                  <Icon name={item.icon} color={item.icon_color} />
                 </span>
               </div>
               <div class="col">