fix: externalise icons

js/components/footer-accordion-item.js

@@ -34,7 +34,7 @@ class FooterAccordionItem extends HTMLElement {
     this._expanded = !this._expanded;
     const content = this.shadowRoot.querySelector(".accordion-content");
     const icon = this.shadowRoot.querySelector(".accordion-icon");
-    
+
     if (content) {
       content.classList.toggle("expanded", this._expanded);
     }
@@ -74,8 +74,7 @@ class FooterAccordionItem extends HTMLElement {
         }
 
         .accordion-icon {
-          width: 24px;
-          height: 24px;
+          display: inline-flex;
           color: var(--color-text-inverse, #ffffff);
           transition: transform var(--transition-fast, 150ms ease);
         }
@@ -101,9 +100,7 @@ class FooterAccordionItem extends HTMLElement {
       </style>
       <div class="accordion-header">
         <h3 class="accordion-title">${title}</h3>
-        <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
+        <chevron-down-icon class="accordion-icon" size="24"></chevron-down-icon>
       </div>
       <div class="accordion-content">
         <slot></slot>