我不想打断你的学习之旅，但我想我应该指出，你已经在按钮上设置了一个活动类，这意味着你可以点击那个活动类来旋转你的图标。
下面我创建了一个单独的div，这样当活动类应用于按钮时，我就可以旋转那个div。你也可以用::after伪元素来做这件事，并保持你的标记干净。如果你有两个单独的图像，你可以只交换背景图像。希望这能激励你尝试所有这些选项来不断学习新技术。

document.querySelectorAll(".collapsible").forEach((coll) => {
  coll.addEventListener("click", () => {
    coll.classList.toggle("active"); //<-- you're already toggling this class

    const content = coll.nextElementSibling;

    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      // Add this:
      content.style.borderWidth = 0;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      // And this:
      content.style.borderWidth = "1px";
    }
  });
});

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition:
  border 0.2s ease-out,
  max-height 0.2s ease-out;
  background-color: white;
  border: 0px solid #D1D3D4;
  border-radius: 3px;
}

.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
}

button {
  font-weight: 900;
  /* 
  I put your background image in
  its own div so I removed it from
  the button styles.
  
  I added flex to make it easier to 
  align the image and push it to the 
  right inside the button.
  */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon {
  /* 
  I just added an inline SVG so you 
  see it working in the snippet, but you
  can use your existing local image.
  */
  background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 16 16' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 25px;
  /*
  Added height and width to the div
  the same size as your background-size
  since it doesn't have an content
  */
  height: 25px;
  width: 25px;
  /* 
  Added a transition so it rotates smoothly
  between the two states
  */
  transition: rotate .25s ease-in-out;
}

button.active > .icon {
  /*
  When the button has the active class
  apply the rotate to any direct child
  with the clas of icon.
  */
  rotate: 180deg;
}

<button type="button" class="collapsible"> Consult Logs <div class="icon"><div></button>

<div class="content">
  <div class="column">
    <p>Ensure the disc strength is not at “0”.</p>
  </div>
  <div class="column">
    <img src="../images/discStrength.png" alt="Picture of Logs">
  </div>
</div>