Native Javascript click event not working on icon in button

I have a button in my HTML + Tailwindcss page like so:

<div class="fixed bottom-4 right-4 z-10">

    <button
        id="button-fab-anchor"
        class="z-50 whitespace-nowrap flex items-center px-3.5 py-2 rounded-full shadow-xl
           outline-none focus:outline-none border-t border-b border-transparent
           combo-primary hover:bg-primary-contrast active:bg-primary-contrast"
    >
        <span class="z-40 icon-inverse-primary text-lg text-center">
            <i id="up-icon" class="fal fa-chevron-up"></i>
            <i id="down-icon" class="fal fa-chevron-down hidden"></i>
        </span>

    </button>

    <ul id="button-fab-list" class="absolute bottom-full right-0 flex flex-col justify-end hidden">
        <li> Buttons here... </li>
    </ul>

</div>

On the page I have the following JS:

document.addEventListener("DOMContentLoaded", function(event) {

    const btnAnchor = document.getElementById('button-fab-anchor');

    if (btnAnchor) {

        const btnList = document.getElementById("button-fab-list");
        const upIcon = document.getElementById("up-icon");
        const downIcon = document.getElementById("down-icon");

        btnAnchor.addEventListener("click",  function(event) {
            if (event.target == btnAnchor) {
                btnList.classList.toggle('hidden');
                upIcon.classList.toggle('hidden');
                downIcon.classList.toggle('hidden');
            }
        });

    }

});

This works fine if I click on the button but not on the icon in the button. I have tried using z-index to place the button parent at z-50 and the icon as z-10 so the parent is stacked above the child.

What sis I miss / How do I set up the event to work on the button parent and all its children (i.e.: the icon)?