在下拉菜单打开的情况下，如何在用于下拉菜单的按钮内更改SVG？

Question

        function show_hide() {
            var click = document.getElementById("account_drop");
            if (click.style.display ==="none"){
                click.style.display = "block";
            }
            else{
                click.style.display = "none";
            }
        }

   .dropdown {
      position: relative;
      background-color: lightskyblue;
      width: 60px;
    }
    
    .button {
      background-color: white;
      border-style: none;
      text-align: center;
      width: 60px;
      height: 80px;
      outline: none;
      margin-top: -7px;
    }
    
    .button .icon_account {
      margin-bottom: 3px;
    }
    
    #account_drop {
      position: absolute;
      z-index: 1;
      display: none;
      margin-top: 80px;
      margin-left: -75px;
    }
    
    #account_drop a{
      display: block;
      font-size: 17px;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      color: white;
      background-color: black;
      opacity: 75%;
      width: 180px;
      padding: 12px;
      margin-bottom: 2px;
    }

  <div class="dropdown">
                
      <div class="iconcontainer">
          <button onclick="show_hide()" class="button">
              <span class="icon_account"></span>
              <span class="iconname">Account</span>
          </button>
       </div>
                
       <div id="account_drop">
         <a href="#">Account</a>
         <a href="#">Call Us</a>
         <a href="#">Give Feedback</a>
         <a href="#">Log Out</a>
        </div>
                
    </div>



 

注意：Iconcontainer和iconname仅用于使图标更容易放置，并用于图标下方的名称。

现在我只使用一个带有svg文件以及Iconname的按钮。 svg和iconname均为灰色，直到将鼠标悬停在它们上方，然后它们将变为黑色（有效） 但是，当下拉菜单处于活动状态时，它应该保持黑色。