Angular 5中动态绑定attr.data-icon加载字体图标失效问题

这个问题我之前也碰到过，本质是静态HTML解析和Angular属性绑定的行为差异导致的：静态场景下浏览器会自动把这类HTML实体编码转换成对应的Unicode字符，但Angular的[attr.data-icon]绑定会直接把字符串原样赋值给属性，不会解析实体编码，所以图标无法正常显示。

下面给你两个实用的解决办法：

方法一：直接使用Unicode转义序列 #

在组件的.ts文件里，把w的值改成Unicode转义格式（用\u开头，后跟四位十六进制字符），这样绑定的时候直接传递的就是实际的字符，浏览器就能正确识别了：

// component.ts
w = '\uE04A'; // 注意是反斜杠u，十六进制字符不区分大小写，也可以写'\ue04a'

模板里保持原来的绑定方式即可：

<i [attr.data-icon]="w"></i>

方法二：创建管道解析HTML实体 #

如果你的图标编码是从后端接口获取的，没办法直接写成Unicode转义格式，可以创建一个Angular管道来统一解析HTML实体：

1. 先创建一个管道文件（比如decode-html-entity.pipe.ts）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'decodeHtmlEntity' })
export class DecodeHtmlEntityPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    // 创建临时DOM元素来解析实体
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = value;
    return tempDiv.textContent || value;
  }
}

2. 在你的模块里声明这个管道：

// app.module.ts（或对应组件的模块）
import { DecodeHtmlEntityPipe } from './decode-html-entity.pipe';

@NgModule({
  declarations: [
    // ...其他组件/管道
    DecodeHtmlEntityPipe
  ]
})
export class AppModule { }

3. 最后在模板里使用管道处理绑定值：

<i [attr.data-icon]="w | decodeHtmlEntity"></i>

这样不管你的w是""还是其他HTML实体编码，都会被转换成对应的Unicode字符，图标就能正常显示了。

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