Klaro customize the icon besides service option

I have configured klaro cookie package in my Angular project with all the required configurations, but I want to change the icon besides count of service:

I want "+" and "-" icons accordingly when service section is open/close. Is there any way to customize it as per need?

Old icon doesn't fade away:

We can use the below CSS to fix the issue, basically I use the pseudo selector :after to overlay the new icon on top of the existing one. I use ::ng-deep so that the component styles are visible to the children of the component!

    ::ng-deep .cm-caret > a[aria-expanded="true"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="true"] > span:after {
      color: var(--green1, #1a936f);
      content: '-';
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span:after {
      color: var(--green1, #1a936f);
      content: '+';
    }

FULL CODE:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { klaroConfig } from './klaro-config';
// we can either import Klaro without styles...
import * as Klaro from 'klaro';
// and the manually load the styles (e.g. to bundle them manually)

// we set up Klaro with the config
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
    <br/>
    <a class="button is-success" (click)="show()"
      >Change consent settings</a
    >
  `,
  styles: [
    `
    ::ng-deep .cm-caret > a[aria-expanded="true"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="true"] > span:after {
      color: var(--green1, #1a936f);
      content: '-';
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span {
      color: transparent;
    }
    ::ng-deep .cm-caret > a[aria-expanded="false"] > span:after {
      color: var(--green1, #1a936f);
      content: '+';
    }
    `,
  ],
})
export class App {
  name = 'Angular';
  klaro!: any;

  constructor() {
    (<any>window).klaro = Klaro;
    (<any>window).klaroConfig = klaroConfig;
    Klaro.setup(klaroConfig);
  }

  show() {
    Klaro.show();
  }
}

bootstrapApplication(App);

Stackblitz Demo