Telerik Kendo Angular升级至14版本后图标无法显示问题排查

问题概况 #

升级Telerik到14版本后，<kendo-icon>组件的图标无法显示，但SVG图标可正常工作。浏览器Elements面板中找不到.k-i-xxx这类字体图标对应的样式，此前版本功能均正常，怀疑问题出在字体或授权环节。

相关代码与配置 #

组件代码 #

<button (click)="refresh()">
  <kendo-icon name="refresh"/>
</button>

package.json核心依赖片段 #

"dependencies": {
  "@angular/core": "^16.2.8",
  "@progress/kendo-angular-icons": "^14.0.0",
  "@progress/kendo-theme-fluent": "^7.0.1",
  "@progress/kendo-data-query": "^1.7.0",
  // 其他Angular及Telerik依赖省略
}

angular.json样式配置 #

"styles": [
  {
    "input": "node_modules/@progress/kendo-theme-fluent/dist/all.css"
  },
  "src/styles.less",
  "src/kendo.less",
  "src/assets/fonts/OpenSans/open-sans.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

可能的问题点及解决尝试 #

• 主题字体图标未正确引入
  Telerik 14部分主题的字体图标可能需要单独处理，先检查@progress/kendo-theme-fluent的all.css里是否包含@font-face规则定义字体图标。如果没有，需单独安装@progress/kendo-font-icons包，并将其CSS添加到样式列表中。

• 图标组件默认渲染方式变更
  14版本的kendo-icon可能默认采用SVG渲染，导致你指定的name对应的字体图标未被触发。尝试显式添加type="font"属性：

  <kendo-icon name="refresh" type="font"/>
  

• 授权验证问题
  若使用商业版Telerik组件，授权失效会导致字体图标被屏蔽。查看浏览器控制台是否有授权相关报错，确认项目内license文件配置是否正确。

• 样式加载顺序冲突
  自定义样式或Bootstrap可能覆盖了Telerik的字体图标样式。将Telerik主题CSS移至样式列表最顶端，确保其样式优先级最高。

• 依赖版本不兼容
  @progress/kendo-data-query仍为1.7.0，与其他14.x版本的Telerik包存在版本不匹配问题。将其升级至14.x系列对应版本后重试。

• 字体文件加载失败
  打开浏览器网络面板，检查Telerik字体图标文件（如.woff2格式）是否存在404错误。若有，说明主题包安装不完整，重新安装@progress/kendo-theme-fluent即可。

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