使用appendChild动态添加Google Material Icons图标失效问题求助

嘿，这个坑我之前踩过！你遇到的问题核心在于**textContent不会解析HTML实体**——当你把""赋值给textContent时，浏览器会把它当成纯文本字符串处理，而不是转换成对应的Unicode字符，所以最终innerHTML变成了转义后的，自然显示不出图标。

下面给你两种靠谱的解决方法：

方法一：直接使用Unicode转义序列（推荐） #

Material Icons的每个图标都对应一个特定的Unicode码点，你可以直接用JavaScript的Unicode转义语法\uXXXX来设置文本内容，这样浏览器会直接识别为对应字符：

var my_element = document.getElementById("icon-div");
// 创建i标签
var i = document.createElement("i");
i.className = "material-icons";
// 用Unicode转义序列代替HTML实体
i.textContent = "\uE192";
// 添加到目标容器
my_element.appendChild(i);

这种方法更安全，不会有XSS风险，也是最直接的方式。你可以在Material Icons官方资源里找到每个图标对应的Unicode码点，替换掉\uE192就行。

方法二：用innerHTML解析HTML实体 #

如果你还是想用HTML实体字符串，可以把textContent换成innerHTML，因为innerHTML会自动解析HTML实体：

var my_element = document.getElementById("icon-div");
var i = document.createElement("i");
i.className = "material-icons";
// 用innerHTML让浏览器解析实体
i.innerHTML = "";
my_element.appendChild(i);

不过要注意：如果这个实体字符串来自用户输入或者不可信的来源，使用innerHTML可能会引入XSS漏洞，所以优先推荐第一种方法。

验证一下，两种方法都能让动态添加的<i>标签正确显示Material Icons图标，和静态写法的效果完全一致。

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