You can check element classList

toggleFilterBt.addEventListener('click', () => {
  categoriesHolder.classList.toggle('categories-show');

  filterText.innerHTML = categoriesHolder.classList.contains('categories-show') ? '<i class="far fa-plus-square"></i>' : '<i class="far fa-minus-square"></i>';
});

$(".filter-btn-span").html('<i class="...."></i>');
is how i did it with jQuery (you put it in your event listener) and fill the i class with the one you want)

1. Add an id to your icon.
2. Get the icon element by id.
3. Add and remove between icon classes by checking that icon’s class.

Here is the working example:

const toggleFilterBt = document.getElementById('toggle-category-filters');
const toggleIcon = document.getElementById('toggleIcon');

toggleFilterBt.addEventListener('click', () => {

    if (toggleIcon.classList.contains('fa-minus-square')) {
        toggleIcon.classList.remove('fa-minus-square');
        toggleIcon.classList.add('fa-plus-square');
    } else {
        toggleIcon.classList.remove('fa-plus-square');
        toggleIcon.classList.add('fa-minus-square');
    }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
    integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
    crossorigin="anonymous" />
<section class="section-center" id="products-filter">
    <div class="products">
        <h1>SHOP THE <br />FLAVOURS</h1>
    </div>
    <button class="toggle-filter" id="toggle-category-filters">
        filter
        <span id="filter-btn-span"><i class="far fa-minus-square" id="toggleIcon"></i></span>
    </button>
</section>

I’m trying to change an existing element on click but I’m struggling to find the logic (very new to this)

I’m trying to switch the below span innerHTM on click. I have “minus” when the filter is not click and I want to add a plus when it is active, see below:

<section class="section-center" id="products-filter">
    <div class="products">
        <h1>SHOP THE <br />FLAVOURS</h1>
    </div>
    <button class="toggle-filter" id="toggle-category-filters">
        filter
        <span id="filter-btn-span"><i class="far fa-minus-square"></i></span>
    </button>
</section>

JS:

const toggleFilterBt = document.getElementById('toggle-category-filters');
const categoriesHolder = document.getElementById('categories-holder');
const filterText = document.getElementById('filter-btn-span');

toggleFilterBt.addEventListener('click', () => {
    categoriesHolder.classList.toggle('categories-show');
    filterText.innerHTML = '<i class="far fa-plus-square"></i>'; 
});

When clicked the button does change to the plus sign, but how do I make it go back to minus when the button is clicked again?