feat: added support for icons inside accordion

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -3,6 +3,7 @@
 import { useRef } from "react"
 
 import { ChevronDownIcon } from "@/components/Icons"
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 
 import { AccordionItemProps } from "./accordionItem"
 import { accordionItemVariants } from "./variants"
@@ -11,12 +12,15 @@ import styles from "./accordionItem.module.css"
 
 export default function AccordionItem({
   children,
+  icon,
   title,
   variant,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
   const detailsRef = useRef<HTMLDetailsElement>(null)
 
+  const IconComp = getIconByIconName(icon)
+
   function toggleAccordion() {
     const details = detailsRef.current
     const content = contentRef.current
@@ -41,7 +45,8 @@ export default function AccordionItem({
     <li className={accordionItemVariants({ variant })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
-          <span>{title}</span>
+          {IconComp && <IconComp className={styles.icon} color="burgundy" />}
+          <span className={styles.title}>{title}</span>
           <ChevronDownIcon className={styles.chevron} color="burgundy" />
         </summary>
         <div ref={contentRef} className={styles.content}>