您可以在按钮内添加两个图像，.active和.inactive，并使用css显示和隐藏基于父活动与否。
就像这样：

<button class="mobile-menu-toggle">
      <img src="https://placekitten.com/1440/671" height=24 width=24 class="inactive" />
      <img src="https://placekitten.com/1440/670" height=24 width=24 class="active" />
 </button>

css：

.mobile-menu-toggle img.active,
.mobile-menu-toggle.active img.inactive {
  display: none;
}

.mobile-menu-toggle.active img.active,
.mobile-menu-toggle img.inactive {
  display: block;
}

这里是jsfiddle。

当你点击图片时，检查类是否激活，然后改变图片，否则设置上一个图片

const hamburger = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');

// Toggle hamburger menu
hamburger.addEventListener('click', (e) => {     
     
    hamburger.classList.toggle('active');
    if(hamburger.classList.contains('active')){
        e.target.src = 'https://placekitten.com/1440/672'
     }
     else{
         e.target.src = 'https://placekitten.com/1440/671'
     }
  navMenu.classList.toggle('active');
});

body {
  margin: 0;
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: grey;
  min-height: 56px;
  padding-left: 16px;
  padding-right: 16px;
}

.hamburger-icon {
  display: flex;
  width: 16.67%;
}

.mobile-menu-toggle {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.heading {
  display: flex;
  width: 58%;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: -100%;
  top: 56px;
  gap: 0;
  width: 100%;
}

.nav-menu.active {
  left: 0;
}

<div class="main-nav">
  <div class="hamburger-icon">
    <button class="mobile-menu-toggle">
      <img src="https://placekitten.com/1440/671" height=24 width=24 />
    </button>
  </div>
  <div class="heading">My menu
    <ul class="nav-menu">
      <li>Home</li>
      <li>About</li>
      <li>Sign up</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

我已经从HTML中删除了img标签，并将它们存储在JS中的变量中。清除了hamburger中的innerHTML，并插入了一个默认情况下希望看到的图像，并动态更改了kitty图像。

'use strict'
const hamburger = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');

const opened_img_html = `<img class="opened_img" src="https://placekitten.com/1440/671" height=24 width=24 />`;
const closed_img_html = `<img class="closed_img" src="http://placekitten.com/g/200/300" height=24 width=24 />`;


hamburger.innerHTML = '';
hamburger.insertAdjacentHTML('beforeend', opened_img_html);

hamburger.addEventListener('click', () => {

  if (hamburger.lastChild.matches('.opened_img')) {
    hamburger.innerHTML = '';
    hamburger.insertAdjacentHTML('beforeend', closed_img_html);
    toggle_classes()
  }
  else {
    hamburger.innerHTML = '';
    hamburger.insertAdjacentHTML('beforeend', opened_img_html);
    toggle_classes()
  }

});

function toggle_classes() {
  hamburger.classList.toggle('active');
  navMenu.classList.toggle('active');
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: grey;
    min-height: 56px;
    padding-left: 16px;
    padding-right: 16px;
}

.hamburger-icon {
    display: flex;
    width: 16.67%;
}

.mobile-menu-toggle {
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.heading {
    display: flex;
    width: 58%;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: -100%;
    top: 56px;
    gap: 0;
    width: 100%;
}

.nav-menu.active {
    left: 0;
}

<div class="main-nav">
        <div class="hamburger-icon">
            <button class="mobile-menu-toggle">
            </button>
        </div>
        <div class="heading">My menu
            <ul class="nav-menu">
                <li>Home</li>
                <li>About</li>
                <li>Sign up</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>