expand_more in navigation

[Root3287]

I am using this theme as another theme that my software is using. Everything looks fine except for the navbar drop-down. Where the arrow supposed to be there is now EXPAND_MORE. (Photos below)

All i am doing is substituting the bootstrap.css with the material.css and if the material.css is used it will activate the material.js

Here is the following code for the navbar.

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="/">Template</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
              <li class="nav-item">
          <a class="nav-link" href="/forums/">Forums</a>
        </li>
          </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Root</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="/user/">UserCP</a>
                          <a class="dropdown-item" href="/mod/">ModCP</a>
                                      <a class="dropdown-item" href="/admin">AdminCP</a>
                          <div class="dropdown-divider"></div>
              <a href="/logout" class="dropdown-item">Logout</a>
                  </div>
      </li>
    </ul>
  </div>
</nav>

Expect Results (bootstrap)

Actual Results (Material)

[Root3287]

It is also the same for chevrons for breadcrums