ngx-admin主题下ng2-smart-table图标不显示问题求助

针对你在Angular项目中使用ngx-admin主题配置ng2-smart-table时图标无法显示的问题，结合你的排查步骤，补充以下针对性解决方案：

1. 确认Eva Icons样式的正确导入 #

确保在项目的styles.scss中同时导入ngx-admin主题样式和Eva Icons核心样式：

// 导入ngx-admin主题
@import '~@nebular/theme/styles/prebuilt/default.css';
// 单独导入Eva Icons样式
@import '~eva-icons/style/eva-icons.css';

同时检查angular.json的styles数组是否包含上述文件路径，避免重复或缺失导入。

2. 验证表格配置的图标类名 #

检查ng2-smart-table的actions配置中，图标类名是否遵循eva前缀+具体图标类的格式，示例：

settings = {
  actions: {
    edit: {
      icon: 'eva eva-edit-outline', // 正确格式
      title: '编辑'
    },
    delete: {
      icon: 'eva eva-trash-2-outline',
      title: '删除'
    }
  },
  // 其他表格配置...
};

不要使用无eva前缀的类名，否则图标无法被正确识别。

3. 确保字体文件被正确打包 #

在angular.json的assets数组中添加Eva Icons字体文件的打包配置，确保字体文件能被Angular正确复制到输出目录：

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

配置完成后执行ng build --prod重新构建项目，再检查浏览器Network面板中字体文件（如eva-icons.woff2）是否加载成功。

4. 修复样式冲突问题 #

ngx-admin的主题样式可能覆盖ng2-smart-table的图标字体设置，在styles.scss中添加自定义样式强制指定图标字体：

.ng2-smart-table .ng2-smart-actions a {
  font-family: 'Eva Icons' !important;
  font-size: 1.2rem; // 可选：调整图标大小
  color: #333; // 可选：调整图标颜色
}

5. 确认依赖版本匹配 #

查看ngx-admin官方文档或其package.json中指定的Eva Icons版本，安装完全匹配的版本，避免版本不兼容问题：

# 例如ngx-admin v6.x通常依赖eva-icons v1.1.3
npm install eva-icons@1.1.3 --save

6. 清理缓存并重建 #

执行以下命令清理Node模块、缓存并重新安装依赖：

rm -rf node_modules package-lock.json
npm install
ng clean
ng build

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