How to add :after and :before icon that change on click button dropdown?

Question

With after and before I'm trying to change the dropdown icon when it is open or closed. So far I have not achieved any results, I am relatively new to all this and I do not understand how I can achieve the result, can someone help me please?

Actually I don't even know if that's the right way to do this.

Edit: Based on AStombaugh's answer I was able to get this result but I don't know if I'm doing it right. Can anyone give me explanations if what I am doing is right or wrong ? Sorry I'm new and trying to understand every aspect of js.

New snippet

var dropdownBtn = document.querySelectorAll('.drop_btn');
iconDrop = null;
lastOpened = null; //Add this for toggling dropdown

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var dropCont = this.nextElementSibling;
  let icon = this.querySelector('.icon_item');
  icon.classList.toggle("visible");
  dropCont.classList.toggle("show");

  //Add this for toggling dropdown
  if (lastOpened && lastOpened !== dropCont)
    lastOpened.classList.remove("show");
  lastOpened = dropCont;

  if (iconDrop && iconDrop !== icon)
    iconDrop.classList.remove("visible");
  iconDrop = icon;
}));

.drop_btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.icon_item:after {
  font-family: fontAwesome;
  content: '\f078';
  float: right;
}

.icon_item.visible:after {
  font-family: fontAwesome;
  content: '\f00d';
}

.drop_btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

.drop_container.show {
  max-height: 300px;
  transition: max-height 0.3s ease-in;
}

.drop_container>.item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="dropdown-menu">

  <div class="drop_btn">One<span class="icon_item"></span></div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="drop_btn">Two<span class="icon_item"></span></div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

</div>

Old original snippet

var dropdownBtn = document.querySelectorAll('.drop_btn');
lastOpened = null; //Add this for toggling dropdown

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  var dropCont = this.nextElementSibling;
  dropCont.classList.toggle("show");
  
  //Add this for toggling dropdown
  if (lastOpened && lastOpened !== dropCont)
      lastOpened.classList.remove("show");
      lastOpened = dropCont;
}));

.drop_btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.drop_btn:before {
  font-family: fontAwesome;
  content: '\f077';
  float: right;
}

.drop_btn:after {
  font-family: fontAwesome;
  content: '\f078';
  float: right;
 }

.drop_btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

.drop_container.show {
  max-height: 300px;
  transition: max-height 0.3s ease-in;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="dropdown-menu">

<div class="drop_btn">One</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

<div class="drop_btn">Two</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

</div>