无法为AEM新增的自定义RTE插件添加图标，如何解决？

方式一：使用Coral UI内置图标（适配默认样式，操作最简单） #

• 找到你的RTE插件注册逻辑对应的JS文件，在注册配置中指定icon属性为你需要的Coral UI内置图标ID：

  // 示例：CUI模式下的插件注册配置
  CUI.rte.ui.ToolkitRegistry.get("cui").registerPlugin("yourCustomPluginId", {
      // 其余插件基础配置
      icon: "textItalic", // 替换为目标Coral UI图标ID
      tooltip: "自定义插件功能提示"
  });
  

• 进入AEM的CRXDE，找到对应RTE的配置节点/apps/[你的项目路径]/config/rte/plugins/[你的自定义插件节点]，新增icon属性，值和上述JS中填写的图标ID保持一致。

方式二：使用自定义SVG图标（支持完全自定义样式） #

• 提前准备尺寸为24*24px的SVG图标，图标填充色建议设置为currentColor，可自动适配AEM的亮/暗色主题。
• 将SVG图标文件存入项目RTE客户端库的资源目录，参考路径：/apps/[你的项目名]/clientlibs/clientlib-rte/resources/icons/custom-plugin-icon.svg
• 在同客户端库的CSS文件中新增样式绑定，类名需遵循rte-ui-[你的插件ID]的命名规则：

  /* 替换yourCustomPluginId为你的自定义插件实际ID */
  .rte-ui-yourCustomPluginId .coral-Icon {
      background-image: url('../resources/icons/custom-plugin-icon.svg');
      background-size: contain;
      background-repeat: no-repeat;
      width: 18px;
      height: 18px;
  }
  /* 隐藏默认Coral图标占位符 */
  .rte-ui-yourCustomPluginId .coral-Icon::before {
      content: none;
  }
  

• 配置完成后清空AEM客户端库缓存、浏览器缓存即可看到效果。

注意：如果图标不生效，优先检查插件ID大小写是否和CSS类名、注册配置中的ID完全匹配，其次确认CSS中引用的SVG资源路径是否正确。

内容的提问来源于stack exchange，提问作者ck-s