Смена иконки с помощью текстового значения
 

В HTML организован элемент с помощью тега <a></a>
<a href="#" class="menu__mode-moon" id="dark-mode-icon">i</a>
Иконка для тега <a></a> организована с помощью иконочного шрифта
<a>i</a> где буква i – это иконка луны
<a>k</a> где буква k – это иконка солнца
С помощью JS происходит переключение между режимами тем (светлая, темная). Код основан на смене текстового значения с i на k при этом происходит смена отображения иконки.
Ошибка в том, что смена иконки согласно кода происходит только с луны на солнца, а если переключиться с темной темы на светлую то смена иконок с солнца на луну уже не происходит (все так же остается иконка солнца (буква k)).
Прошу помощи в исправлении ошибки в коде JS

let darModeIcon = document.querySelector('#dark-mode-icon');
let paragraph = document.querySelector('.menu__mode-moon');

darModeIcon.onclick = () => {
  paragraph.textContent = 'k';
  document.body.classList.toggle('dark-mode');
};

Для сведения:
'dark-mode' – это свойства цифровых палитр для темной темы

.dark-mode {
  --bg-color: #0b061f;
  --text-color: #fdfdfd;
  --shadow-color: rgba(0, 0, 0, .7);
}

Спасибо большое