Icon Toggle (between 4 possible icons)

I am working with creating a mute button that depending on the volume changes its icon. Currently I have the src of the image set to public/img/VolumeLow.svg, however there is also a VolumeHigh.svg and VolumeHalf.svg.

To account for this I have a variable oldVolIcon that logs what the previous icon is and if the icon is the muted one, it should return to its previous state. However I feel like I have the variable located in the wrong place or it is not being returned properly.

Thank you in advance for the help.

document.getElementById('btnMute').addEventListener('click', function(){
    if (this.style.borderStyle == "outset"){
        this.oldVolume = document.getElementById('vol-control').value;
        this.style.borderStyle = "inset";

        var oldVolIcon = document.getElementById('volicons').src;
        document.getElementById('volicons').src = "public/img/VolumeMute.svg";

        console.log(oldVolIcon);
        document.getElementById('vol-control').value = 0;
    } else {
        console.log(oldVolIcon);
        this.style.borderStyle = "outset";
        document.getElementById('vol-control').value = this.oldVolume;
        document.getElementById('volicons').src = oldVolIcon;
    }
    setVolume.call(document.getElementById('vol-control'));
});