<!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>