Angular项目中Klaro Cookie服务展开/收起图标自定义方案咨询

一、自定义展开/收起的"+"/"-"图标 #

Klaro可通过CSS自定义样式结合自带类名实现图标替换：

1. 隐藏默认图标：先将Klaro自带的服务列表箭头图标隐藏

.klaro-service-toggle svg {
  display: none;
}

2. 通过伪元素切换"+"/"-"：利用:before伪元素结合展开状态类名实现图标切换

/* 收起状态显示"+" */
.klaro-service-toggle:before {
  content: "+";
  margin-right: 8px;
  font-size: 18px;
  font-weight: bold;
}

/* 展开状态显示"-" */
.klaro-service-toggle.expanded:before {
  content: "-";
}

3. 集成到Angular项目：将上述CSS代码添加到全局样式文件（如styles.scss），或组件样式文件中（需启用ViewEncapsulation.None）。

二、解决旧图标无法消失的问题 #

旧图标残留多因样式优先级不足或缓存导致，按以下方式处理：

• 提升选择器权重：使用更具体的选择器覆盖默认样式，必要时添加!important强制生效

.klaro-modal .klaro-service-toggle svg {
  display: none !important;
}

• 清除缓存：清空浏览器缓存，或重启Angular开发服务器，确保新样式加载生效
• 检查Klaro配置：确认配置文件中无强制显示默认图标的参数（如showIcon，若存在则设为false）

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