diff --git a/packages/components/src/__internal__/components/icon.tsx b/packages/components/src/__internal__/components/icon.tsx
index e44142119b9..5522af3a0f5 100644
--- a/packages/components/src/__internal__/components/icon.tsx
+++ b/packages/components/src/__internal__/components/icon.tsx
@@ -15,11 +15,7 @@ export function Icon({ icon, class: className, onClick }: IconProps) {
     <span
       class={clsx('milkdown-icon', className)}
       onPointerdown={onClick}
-      ref={(el) => {
-        if (el && icon) {
-          ;(el as HTMLElement).innerHTML = DOMPurify.sanitize(icon.trim())
-        }
-      }}
+      innerHTML={icon ? DOMPurify.sanitize(icon.trim()) : undefined}
     />
   )
 }