Материализовать значки CSS в Side-Nav, которые не выравниваются?

Я добавил на свою страницу версию Materialize с боковой навигацией и иконками. Но когда я нажимаю, чтобы развернуть и показать боковую навигацию, значки складываются по диагонали. Я не могу понять, почему.

Вот код, который я использую для этого.

    <div class="navbar-fixed">
<nav class="headerRow">
    <div id="adminMenu" class="nav-wrapper">
        <a href="#!" class="brand-logo">BASTAS</a>
        <a href="#" data-activates="narrower" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
            <li>
                <a href="#" id="home"><i class="medium material-icons">home</i></a>
            </li>
            <li>
                <a href="#" id="giveAGift"><i class="medium material-icons">card_giftcard</i></a>
            </li>
            <li>
                <a href="#" id="dashboard"><i class="material-icons">dashboard</i></a>
            </li>
            <li>
                <a href="#" id="recipientsList"><i class="material-icons">group</i></a>
            </li>
            <li>
                <a href="#" id="addRecipients"><i class="material-icons">groupadd</i></a>
            </li>
            <li>
                <a href="#" id="importRecipients"><i class="material-icons">system_update_alt</i></a>
            </li>
            <li>
                <a href="#" id="sendReminder"><i class="material-icons">email</i></a>
            </li>
            <li>
                <a href="#" id="settings"><i class="material-icons">settings</i></a>
            </li>
        </ul>
        <ul class="side-nav" id="narrower">
            <li>
                <a href="#" id="home"><i class="material-icons">home</i>Home</a>
            </li>
            <li>
                <a href="#" id="giveAGift"><i class="small material-icons">card_giftcard</i>Give</a>
            </li>
            <li>
                <a href="#" id="dashboard"><i class="small material-icons">dashboard</i>Dash</a>
            </li>
            <li>
                <a href="#" id="recipientsList"><i class="small material-icons">group</i>Recipients</a>
            </li>
            <li>
                <a href="#" id="addRecipients"><i class="material-icons">groupadd</i>Add Recipients</a>
            </li>
            <li>
                <a href="#" id="importRecipients"><i class="material-icons">system_update_alt</i>Import</a>
            </li>
            <li>
                <a href="#" id="sendReminder"><i class="material-icons">email</i>Send Reminder</a>
            </li>
            <li>
                <a href="#" id="settings"><i class="material-icons">settings</i>Settings</a>
            </li>
        </ul>
    </div>
</nav>

Any help with this would be greatly appreciated. I've searched around, and not come across this issue with other posts.