Javascript Change Font Awesome Icon onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <button class="icon-container" id="iconButton">
        <i id="icon" class="fa-solid fa-thumbs-up "></i> Click Me
    </button>
    <script>
        const iconButton = document.getElementById('iconButton');
        iconButton.addEventListener('click', () => {
            const iconElement = document.getElementById('icon');
            iconElement.classList.toggle('fa-thumbs-up');
            iconElement.classList.toggle('fa-thumbs-down');
        });
    </script>
    <style>
        .icon-container {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 10px;
            outline: none;
        }

.icon-container:hover {
            background-color: #45a049;

}
    </style>
</body>

</html>