带有文本的水准图标

Question

我正在尝试在导航栏中的文本旁边放置一些图标。但是，将图标放置在文本旁边后，它们似乎比图标旁边的文本稍高...

我认为这将是CSS中的line-height标记，但这不起作用。

<div id="navbar">
        <ul>
            <li><a href="index.html"><i class="material-icons">home</i>Home</a></li>
            <li><a href="#"><i class="material-icons">computer</i>Book Online</a></li>
            <li><a href="#"><i class="material-icons">share</i>Reviews</a></li>
            <li><a href="#"><i class="material-icons">person</i>About</a></li>
            <li><a href="#"><i class="material-icons">phone</i>Contact</a></li>
        </ul>
</div>


#navbar ul {
    list-style-type: none;
    padding: 10px;
}
#navbar {
    background-color: grey;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#navbar ul li { 
    display: inline-block;
    font-size: 18px;
    padding-right: 20px;
    padding-left: 20px;
}