javascript event.target.match or event.target.closest does not work

In my project, I have a cart icon that when mouse clicks on the icon needs to unfold a dropdown list with two link options. When the mouse is clicking on somewhere else or in a blank space the dropdown list needs to dissapear.

Here is a snippet of my html template which shows upon clicking on the element with id shoppingCartIcon the javascript function cartIconClicked() is called.

<div class="container-fluid sticky-top" id="takeawayHeaderCartContainer">
    <div class="row">
        <div class="col-11" id="cartIconContent">
            <i class="fa dropbtn" id="shoppingCartIcon" onclick="cartIconClicked()">&#xf07a;</i> <!--this code codes for the shopping cart icon-->
            <span class='badge badge-warning' id='lblCartCount'> 
                {% if sessionValidity %}
                    {{totalCartItems}}
                {% else %}
                0 
                {% endif %}
            </span>
            <div id="myDropdown" class="dropdown-content">
                <a href="#">Option 1</a>
                <a href="#">Option 2</a>
            </div>
        </div>        
    </div>
</div>

In my css file I have this snippet.

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#takeawayHeaderCartContainer {
  justify-content: flex-end;
}

#shoppingCartIcon {
  font-size: 2rem;
  float: right;
  color: blue;
}

#lblCartCount {
    font-size: 16px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    float: right;
}

.badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.label-warning[href],
.badge-warning[href] {
  background-color: #c67605;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

I am not sure if I fully graps the last line .show {display:block;} in above css style because we do not have a show class in the html template to begin with. I therefore guess it is meant for the javascript – see below. I got this script from this tutorial. Can someone explain to me what this line in particular classList.toggle("show") does? I guess it switches the class “show” on and off for the dropdown list? My biggest problem is though, this line if (!event.target.closest('.fa dropbtn')). This line gets fired every time both when I click on the cart icon and somewhere else, which is NOT the intension. It should get fired if the user clicks somewhere else than the cart icon, in which case a check will be performed to see if the drop down list has the “show” on and if so it should be removed, leading to drop down list dissapearing – see the link tutorial for full description.

function cartIconClicked() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
      console.log(event.target);
      if (!event.target.closest('.fa dropbtn')) 
      {
        console.log("we are here");
    }
}