实现CSS - 在移动折叠菜单中，带图标的链接不是垂直居中的

Question

也许这是一个错误，我不确定，但在使用移动折叠菜单时，图标和文字没有对齐（见图片）。

原因是因为这些CSS属性：

HTML：

＆＃13;

＆＃13;

.side-nav a {
    color: #444;
    display: block;
    font-size: 1rem;
    height: 64px;
    line-height: 64px;
    padding: 0 30px;
}

nav i.material-icons {
  display: block;
  font-size: 2rem;
  height: 56px;
  line-height: 56px;
}

＆＃13;

<ul style="transform: translateX(0px);" class="side-nav" id="mobile-menu">
  <img src="images/costum_logos/logo3.png" class="custom-logo">
  <div class="divider"></div>
  <a href="index.php" class="waves-effect waves-light">Albums
    <i class="material-icons left notranslate">collections</i>
  </a>
  <a href="?page=settings" class="waves-effect waves-light">Settings
    <i class="material-icons left notranslate">settings</i></a>
  <a class="waves-effect waves-light red-text text-lighten-1" href="index.php?logout">Logout
    <i class="material-icons left notranslate">power_settings_new</i>
  </a>
</ul>

＆＃13;

＆＃13;

＆＃13;

当然，有趣的位是锚标记和图标标记上的line-height和height属性。他们不平等。如果我覆盖其中任何一个，就像另一个 - 它们完全对齐。

我的问题是：我做错了吗？我可以很容易地解决它，但我希望有一个很好的实践与实现CSS。不要想破解他们的约定。

提前致谢！