Iconify图标无法渲染，请求代码错误排查与使用指导

问题核心 #

你当前代码的错误在于使用方式不匹配：加载的是Iconify Web Component（<iconify-icon>标签）的脚本，但却用了Iconify CSS类名的写法（span.icon-[ph--airplay-fill]），这两种方式不兼容，导致图标无法渲染。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
  </head>
  <body>
    <div>
      <iconify-icon icon="ph:airplay-fill" style="width: 256px; height: 256px; color: #fff"></iconify-icon>
    </div>
  </body>
</html>

关键说明 #

• 标签替换：必须用<iconify-icon>标签，通过icon属性指定图标（格式为[图标库前缀]:[图标名]，比如ph:airplay-fill），而不是给span加类名。
• 图标名称验证：确保图标库前缀（这里是ph，对应Phosphor图标库）和图标名（airplay-fill）正确，拼写错误会导致图标加载失败。
• 样式控制：宽高、颜色等样式可以直接通过style属性设置，也可以用CSS类统一管理，和普通HTML元素的样式写法一致。

额外指导 #

如果偏好使用CSS类名的方式渲染图标，需要额外生成对应的CSS文件，但Web Component方式无需额外配置，更适合快速上手。

内容的提问来源于stack exchange，提问作者Avinash Kumar