如何在点击2秒后用JavaScript动态改变按钮上的图标

我的脚本的主要目的是宣布文本的副本已成功完成.

当我点击按钮时，第一个图标改变是OK，就像 cogo toast 显示一样，文本被正确地复制到框架clipboard.js中.

<button 
   class="btn btn-outline-success"
   id="url-rss" data-clipboard-text="Texte à copier">
      <i class="fa-regular fa-clipboard" id="icon"></i>
</button>

当我在2秒后点击按钮时，我希望脚本再次将按钮更改为fa-circle-check到fa-clipboard.

我用的是clipboard.js、Bootstrap 5 (bundle)和Font Awesome.

这是我的 playbook :

document.addEventListener('DOMContentLoaded', function () {
    // Load of Clipboard.js
    let clipboard = new ClipboardJS('#url-rss')

    // Variable for the Toast with Bootstrap 5
    let toastCopie = new bootstrap.Toast(document.querySelector('#copieToast'), {
        animation: true,
        delay: 2500
    });

    // We listen #url-rss on click
    document.querySelector('#url-rss').addEventListener('click', async function() {
        // If Click on the <button> do a Toast()
        toastCopie.show()

        let iconElement = document.querySelector('#icon')

        // Change of the icon, first round
        iconElement.classList.remove('fa-clipboard')
        iconElement.classList.add('fa-circle-check')

        await new Promise(resolve => setTimeout(resolve, 2000));

        // Chnage of the icon, second round
        iconElement.classList.remove('fa-circle-check');
        iconElement.classList.add('fa-clipboard');
    })
});

我已经复制了我的script on codepen个例子，如果有人想try .

我也试过这个:

        setTimeout(function() {
            iconElement.classList.remove('fa-circle-check');
            iconElement.classList.add('fa-clipboard');
        }, 2000);

但是经过各种try 和研究，我的JavaScript技能还不够先进，无法独自解决这个问题.