Changing the name of an ion-icon that's used as an alternate Tumblr like button

I'm using ion-icon as a customized Tumblr button for the theme I'm currently working on. My goal here is to change the name of the icon from "heart-outline" to simply "heart" (which is the name for the heart icon when it's filled) when the post itself has been liked or hovered, and back again to "heart-outline" if unliked.

Is there any way to do this at all?

My code heavily references (I mean straight-up copy-pasted with some modifications, lol) this post by Shy Themes.

Any help will be greatly appreciated; thank you.

var $container = $('.posts');

function newElements() {
  var $newElems = $(newElements);
  var $newElemsIDs = $newElems.map(function() {
    return this.id;
  }).get();
  
  Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
};

.likeb:hover {
  color: #c20404;
  transition: all 0.3s;
}

.likeb .like_button iframe {
  top: -3px;
  left: 0;
  bottom: 0;
  right: 2px;
  position: absolute;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.likeb.liked+.b {
  color: #c20404;
}

ion-icon {
  --ionicon-stroke-width: 32px;
  margin-bottom: -2.5px;
}

<div class="posts" id="{PostID}">
  <a class="likeb">{LikeButton}<span class="b"><ion-icon name="heart-outline"></ion-icon></span></a>
</div>

<!--IONICON-->
 <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
 <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

OK, I am completely rewriting my answer.

I added a reference to an older version of ion-icons (this has a heart and heart outline icon but allows us to change the content using css alone which we cannot do using the later ion-icons).

<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

I added this small piece of CSS:

.likeb .liked + .icon::before {
   content: "\f443"; // this will change to a filled heart icon
   color: #c20404;
}

I had to change the like button markup so it now looks like this:

<a class="likeb">{LikeButton}<i class="icon ion-ios-heart-outline"></i></a>

In addition I removed the click event I added in my previous answer as that is now redundant. The code starts (but is almost at the bottom of the current theme):

<!--🖕LIKE BUTTON FILL🖕-->
        <script>
            var likeButton = document.querySelectorAll('.likeb');

The whole code block is pasted here: https://xxxxx.io/ I hope you can get this working, I can elaborate more on what I have done, but I am hoping it is fairly self-explanatory.

I asked about a code editor because you really want the file stored locally and then you can version it (make a back up etc). I think using an online editor is always going to be slightly disadvantageous, for instance in a code editor you can check the line numbers, edit find, copy, paste etc.