NavBar Buttons not working properly

Hi, I am new to Angular and chanced upon MDB and though it was nice and easy to use.

I tried to setup the MBD Angular using the instructions on the quick-start site (Quick Start Site) and everything was fine.

It was alright until I was trying out the examples provided on the site: Examples Site

The icons does not seem to be at the expected locations. The icons on should appear on the right of the NavBar, however all the icons are appearing on the left.

Version Information:

Node: v8.11.1
NPM: v5.6.0
font-awesome@4.7.0
angular-bootstrap-md@6.0.0
chart.js@2.5.0
hammerjs@2.0.8

Below is the code that I used from the example.

<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark pink scrolling-navbar ie-nav" [containerInside]="false">
    <logo>
        <a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
    </logo>
    <links>
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active waves-light" mdbWavesEffect>
                <a class="nav-link">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link">Features</a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link">Pricing</a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link">Opinions</a>
            </li>
        </ul>
        <ul class="navbar-nav nav-flex-icons">
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link"><i class="fa fa-facebook"></i></a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link"><i class="fa fa-twitter"></i></a>
            </li>
            <li class="nav-item waves-light" mdbWavesEffect>
                <a class="nav-link"><i class="fa fa-instagram"></i></a>
            </li>
        </ul>
    </links>
</mdb-navbar>
<!-- Main -->
<main>
    <div class="container" style="height:1300px;">
        <div class="row mt-5 pt-5">
            <div class="col text-center">
                <h2>This Navbar is fixed</h2>
                <h5>It will always stay visible on the top, even when you scroll down</h5>
                <br>
                <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
            </div>
        </div>
    </div>
</main>
<!-- /.Main -->