VS Code中Iconify Vue组件部分同系列图标无法正常渲染的问题咨询

嗨，我遇到了一个挺费解的问题，想请教下各位大佬：

我在编写Vue.js组件时，写了一段根据餐食类型返回对应Iconify图标的代码：

const mealIcon = (meal: string): string => {
  switch (meal) {
    case "lunch":
      return 'ic:outline-lunch-dining'
    case "dinner":
      return 'material-symbols:meal-dinner-outline'
    case "coffee":
      return 'material-symbols:coffee-outline'
  }
  return 'fluent-mdl2:unknown-mirrored'
}

但实际使用时发现，*同一个图标集（material-symbols）*下的material-symbols:meal-dinner-outline无法被解析成图标显示，而同系列的material-symbols:coffee-outline却能正常渲染，其他几个图标也都没问题，最终这个异常的图标会 fallback 到fluent-mdl2:unknown-mirrored。

我实在搞不懂，明明是同一系列、同风格的图标，为啥会出现这种差异？而且所有图标都是通过Iconify Vue安装的。

我自己初步排查了几个方向，但还没解决，也想听听大家的看法： #

• 图标名称拼写：反复核对了meal-dinner-outline的拼写，看起来没问题，但会不会是图标集里这个图标的命名有细微差异？
• 缓存问题：试过重启VS Code，但还是没效果，要不要试试清除项目依赖缓存后重新安装？
• 版本兼容：会不会是我用的Iconify Vue版本太旧，不支持这个特定图标？

内容来源于stack exchange