How to add icon to WooCommerce add to cart button

in woocommerce, I want to add an icon from the iconify library to the add to cart button of my site
I made some attempts, but I did not get the desired result.
I used WooCommerce hooks, but this icon is displayed as an html tag and does not work,this code is:

add_filter('woocommerce_product_single_add_to_cart_text', 'ChangeAddToCartBtnText');
add_filter('woocommerce_product_add_to_cart_text', 'ChangeAddToCartBtnText');
function ChangeAddToCartBtnText()
{
    $ProductID = get_the_ID();
    $Stock = get_post_meta($ProductID, '_stock_status', true);
    if ($Stock == 'outofstock') {
        $text = '<iconify-icon icon="fluent:info-12-regular"></iconify-icon> More Info';
    } else {
        $text = '<iconify-icon icon="fluent:cart-24-regular"></iconify-icon>  Add To cart';
    }
    return $text;
    //You can also do this with switch statement
}

I decided to do this with jquery, but I ran into problems at this stage, my code is this:

 $('#primary .button ').html('<iconify-icon icon="fluent:info-12-regular"></iconify-icon> More Info');
    $('#primary .add_to_cart_button ').html('<iconify-icon icon="fluent:cart-24-regular"></iconify-icon> Add To cart');

But this code is only responsive when the page is opened for the first time, and when the user uses ajax filters, the shopping cart buttons return to their original state without icons.
I tried to run this code when the structure of the category page changes when a filter is selected and the products are rearranged, my code is:

 var typingTimer;                //timer identifier
    var doneTypingInterval = 1000;  //time in ms, 5 seconds for example
    var $input = $('#primary');
    var Products, LastLength;
    //on keyup, start the countdown
    $input.one('DOMSubtreeModified', function () {
        Products = $('[id^=ProductBox_]');
        if (Products.length == LastLength && Products.length != 0) {
        } else {
            LastLength = Products.length;
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        }
    });
    //user is "finished typing," do something
    function doneTyping() {
        $('#primary .button ').html('<iconify-icon icon="fluent:info-12-regular"></iconify-icon> More Info');
        $('#primary .add_to_cart_button ').html('<iconify-icon icon="fluent:cart-24-regular"></iconify-icon>  Add To cart');
    }

But this code only works once, that is, if the user selects two filters, the buttons will return to the first state.
Even I from $input.bind('DOMSubtreeModified', function () { I also used it, but this also creates unnecessary processing for the site, and this slows down my product category page, this code causes my function to run indefinitely, and this is not good at all.