PrimeNG组件图标在IE全版本刷新后消失，本地正常生产环境异常

我之前也碰到过类似的生产环境IE（包括IE7到IE11）下PrimeNG图标丢失的问题，结合你描述的本地正常、生产异常的情况，大概率是生产环境的资源加载、缓存或兼容性配置导致的，给你几个实用的排查和解决方向：

1. 检查字体图标的加载路径（最常见原因） #

PrimeNG的图标大多依赖PrimeIcons字体文件，生产环境打包后很容易出现路径错误：

• 打开IE的开发者工具（按F12），切换到「网络」标签，刷新页面后搜索.woff/.woff2/.ttf这类字体文件，看是否有404错误；
• 如果你用的是Angular项目，检查angular.json的assets配置，是否包含了PrimeIcons的字体目录，比如：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "./node_modules/primeicons/fonts/",
      "output": "./assets/fonts/"
    }
  ]
  

• 确认打包后的CSS文件中，字体引用的路径是正确的相对路径，避免出现绝对路径错误。

2. 修复IE的缓存与兼容性模式 #

IE的缓存机制和旧渲染模式经常会导致静态资源加载异常：

• 在生产环境的服务器配置中，给字体、CSS文件添加合适的Cache-Control响应头，避免浏览器缓存过期资源；
• 确保HTML头部添加了强制IE使用最新渲染模式的meta标签：

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  

• 检查IE是否开启了「兼容性视图」，可以手动关闭（设置>兼容性视图设置），或者在服务器配置中添加响应头X-UA-Compatible: IE=edge强制关闭。

3. 排查打包工具的资源处理配置 #

如果用Webpack、Angular CLI等工具打包，可能存在资源处理不当的问题：

• 确认打包配置中，对字体文件（后缀为.woff/.woff2/.ttf/.eot）的处理规则正确，确保这些文件被输出到正确的静态资源目录；
• 避免过度的CSS压缩或Tree Shaking导致图标相关的伪元素样式被误删，检查生产环境的CSS中，图标对应的伪元素（比如.p-paginator-prev::before）是否保留了正确的content属性值（比如"\e904"）。

4. 处理跨域与CDN问题 #

如果生产环境使用了CDN或静态资源服务器：

• 检查CDN是否正确分发了PrimeIcons的字体文件，确保文件存在且路径正确；
• IE下跨域加载字体需要服务器设置CORS响应头，比如Access-Control-Allow-Origin: *（或指定域名），避免字体加载被拦截。

我当时碰到的情况是打包后字体路径配置错误，调整angular.json的assets路径后就解决了，你可以按照上面的步骤逐一排查，应该能快速定位问题。

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