css accordion加减图标转换不正确

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题</div>
    <div class="accordion-content">内容</div>
  </div>
</div>

.accordion-content {
  display: none;
}

.accordion-header::before {
  content: '+';
}

.accordion-header:checked + .accordion-content {
  display: block;
}

.accordion-header:checked::before {
  content: '-';
}

<div class="accordion">
  <input type="checkbox" id="accordion1" class="accordion-header">
  <label for="accordion1">标题</label>
  <div class="accordion-content">内容</div>
</div>

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题 <span class="icon">+</span></div>
    <div class="accordion-content">内容</div>
  </div>
</div>

document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', function() {
    const content = this.nextElementSibling;
    const icon = this.querySelector('.icon');
    if (content.style.display === 'block') {
      content.style.display = 'none';
      icon.textContent = '+';
    } else {
      content.style.display = 'block';
      icon.textContent = '-';
    }
  });
});