<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Iconify Demo: Usage</title> <style> html, body { margin: 0; padding: 0; background: #fff; color: #000; } body { padding: 8px; font-size: 16px; line-height: 24px; } p { margin: 0; padding: 8px; } p:nth-child(2n) { background-color: #f8f8f8; } </style> <script src="../dist/iconify.min.js"></script> </head> <body> <p>This is a simple HTML page with few icons.</p> <p> Icon that behaves like an image: <span class="iconify" data-icon="bi:house-door"></span> </p> <script> setTimeout(() => { // Replace document.body const node = document.createElement('body'); node.innerHTML = '<p>Icon in new body: <span class="iconify" data-icon="bi:house-door"></span></p>'; document.documentElement.replaceChild(node, document.body); }, 1000); </script> </body> </html>