How to replace icons with Javascript functions

I've been working on some interactive player icons for a Spotify Clone application.
I have no problem getting the icon/button to play the song file, but I can't seem to figure out how to replace the icon classes (from 'fa-solid-play' to 'fa-solid-pause' for ex.) using an OnClick event.

At first I tried to change the classes using the innerHTML.text method but I found that just nested a new icon inside the already existing one.
The following code returns classList = null when I call the function, and the same is true for any kind of removeClass/ addClass alternative.
I feel I may have to refactor some of the HTML for this to make sense perhaps.

For reference this a snippet of the HTML:

 <div class="Player-Icons">
<div class="Icon-Div">
<div class="Shuffle-Icon" onclick="shuffle()"><i class="fa-solid fa-shuffle"></i></div>
<div class="Previous-Icon" onclick="previous()"><i class="fa-solid fa-backward"></i></div>
<div class="Play-Icon" onclick="playsong()" ><i class="fa-solid fa-circle-play"  aria-hidden='true' id="Triangle-Play"></i></div>
<div class="Next-Icon" onclick="next()"><i class="fa-sharp fa-solid fa-forward-step"></i></div>
<div class="Repeat-Icon" onclick="shuffle()"><i class="fa-solid fa-repeat"></i></div>
</div>

JS Snippet:

    { let play = document.querySelector('.Play-Icon ');
let next = document.querySelector('.Next-Icon');
let current_title = document.querySelector('.Song-Title');
let current_artist = document.querySelector('.Song-Artist');
let current_image = document.querySelector('.Current-Image');
let slider = document.querySelector('.Slider');
let time = document.querySelector('.Song-Start');
let remaining_time = document.querySelector('.Song-Finish');
let volume = document.querySelector('.Volume-Slider');
let timer;
let autoplay = 0;
let index_no = 0;
let playing_song = false;
//const playIconClassName = 'fa-circle-play'
//const pauseIconClassName = 'fa-circle-pause'
//Audio Element
let track = document.createElement('audio');
//Song List 
let All_song = [
{
name: "No Ceilings",
path: "Playlist /Track/No Ceilings.mp3",
img: "Image/image1.jpg",
artist: "Tony Shhnow",
}
]
//All Functions
//Load the track
function load_track(index_no){
track.src = All_song[index_no].path;
current_title.innerHTML =  'No Ceilings'; //All_song[index_no].name
current_artist.innerHTML = 'Tony Shhnow';
current_image = All_song[index_no].img;
track.load();
console.log('Current artist is ' + current_artist.innerHTML);
console.log('Current title is ' + current_title.innerHTML );
}
load_track(index_no);
//Checker for current song / If else 
function justplay(){
if(playing_song==false) {
playsong();
} /*else{
pausesong();
}*/

}

//Function for playing sample song
function playsong(){
track.play();
playing_song = true
if(playing_song==true)  {
document.querySelector('Play-Icon').classList.remove('fa-circle-play');
document.querySelector('Play-Icon').classList.add('fa-circle-pause');
console.log('btnpressed');
} 

}

At first I tried to change the classes using the innerHTML.text method but I found that just nested a new icon inside the already existing one.
The following code returns classList = null when I call the function, and the same is true for any kind of removeClass/ addClass alternative.
I feel I may have to refactor some of the HTML for this to make sense perhaps.

Missing a "."

querySelector('div') will find a div element.
What you are referring to is a class name, so you need a ..

Try changing

if(playing_song==true)  {
document.querySelector('Play-Icon').classList.remove('fa-circle-play');
document.querySelector('Play-Icon').classList.add('fa-circle-pause');
console.log('btnpressed');
} 

to

if(playing_song==true)  {
document.querySelector('.Play-Icon').classList.remove('fa-circle-play');
document.querySelector('.Play-Icon').classList.add('fa-circle-pause');
console.log('btnpressed');
}