title: Event dropdown doesn't work on icon in safari
body: <p>I'm using <a href="https://www.w3schools.com/howto/howto_js_dropdown.asp" rel="nofollow noreferrer">this method</a> for a button dropdown. </p>
  
  <p>I deleted the text, and add an icon, like that :</p>
  
  <pre><code>&lt;button onclick="myFunction()" class="dropbtn"&gt;&lt;i class="my-icon"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>It works, but on Safari, the dropdown effect does not work when i click on icon.</p>
  
  <p>It works around the icon, but not when I click above. </p>
  
  <p>Anybody knows what to do?</p>
  
  <p>Javascript code :</p>
  
  <pre><code>/* When the user clicks on the button,
  toggle between hiding and showing the dropdown content */
  function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
  
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  } 
  </code></pre>