Кнопка не работает в Chrome, если есть значок

Question

У меня есть кнопка выпадающего меню, но когда она содержит значок, она не работает должным образом в Chrome.Работает только если я нажимаю на края кнопки.Другие браузеры работают нормально.Я использую иконки Awesome Font и имею больше похожих кнопок, которые все работают, но не эту.Это ошибка CSS?

  <div class="dropdown">
            <button onclick="dropMenu()" class="dropbtn">
                  <i class="fas fa-bars"></i>
            </button>
            <div id="drop-menu" class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>                        
            </div>                
    </div>

JS

function dropMenu() {document.getElementById("drop-menu").classList.toggle("show");  

window.onclick = function(event) { 
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
   }
  }
 }
}

CSS

.dropdown {
float: left;
padding-left: 1%;    
position: relative;
display: inline-block;}

.dropbtn {
font-size: 100%;
border: none;
outline: none;    
padding: 13px;
background-color: yellow;
width: 45px;
font-family: inherit;
margin: 0;
display: none;}

.dropbtn:hover, .dropbtn:focus {
background-color: grey;}

.dropbtn:hover {
cursor: pointer;    
background-color: grey;}

.dropdown-content {
display: none;
position: absolute;
background-color: grey;
min-width: 250px;
z-index: 1;}

.dropdown-content a {
float: none;
color: white;
padding: 5px 10px;
text-decoration: none;
display: block;
text-align: left;}

.dropdown-content a:hover {
background-color: grey;}

.show {
display: block;}

.fa-bars {
color: white;}