version 4.8.1

I expected the avatar to look the way it does in the mdbootstrap documentation. Just to be more specific:there's a navbar section in the documentation and one of the navbars have an avatar with an envelope icon next to it

What's actually happening is the image is not being affected, instead the original image is being used

Here's the html code (I'm using asp.net mvc, just by the way)

Rendered HTML:

<div class="mb-1 navbar navbar-expand-lg navbar-dark secondary-color lighten-1">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="/">Loyaltyworx</a>
            </div>
            <div class="navbar-collapse collapse show">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link waves-effect waves-light" href="/?Length=4">Home</a></li>
                    <li class="nav-item"><a class="nav-link waves-effect waves-light" href="/Home/About?Length=4">About</a></li>
                    <li class="nav-item"><a class="nav-link waves-effect waves-light" href="/Home/Contact?Length=4">Contact</a></li>
                </ul>
                <form action="/Account/LogOff" class="form-inline" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="cZRy1b12dN8sz_NR6p9jnWqAcOdyxDnfuYhPdsqPXCOzIBc0dENzipvAw3lzw0FrWt1iVjMd0MkIPrnzvMdBGThNvkI8LeYM2Q3CiYo0eY9aPQV3mJP_05kEptu9fC6Ii0yR5HK437tfCt8Otiv74A2">    <ul class="navbar-nav navbar-nav ml-auto nav-flex-icons">
        <li class="nav-item avatar">
            <a class="nav-link dropdown-toggle waves-effect waves-light" id="navbarDropdownMenuLink-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <img src="https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=2161355883936053&amp;height=200&amp;width=200&amp;ext=1561024072&amp;hash=AeTl2RjaPQM_EsFe" class="rounded-circle z-depth-0" alt="avatar image">
                <span>Clifton Steenkamp</span>
            </a>
            <div class="dropdown-menu dropdown-menu-lg-right dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-5">
                <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
            </div>
        </li>
        <li class="nav-item"><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link waves-effect waves-light">Log off</a></li>
    </ul>
</form>
            </div>
        </div>
    </div>

Result: