How to toggle dropdown after click on icon using mdb-angular

I'm currently trying to create a dropdown with only one icon using mdb-angular-ui-kit (I'm using 1.0.0-beta6). When I click on the icon nothing happens. If I click next to the icon, the menu appears.

How can I fix this? You can find a test project here, I couldn't install the toolkit on a stackblitz project.

app.component.html

<div mdbDropdown class="dropdown">
  <button
    class="btn btn-primary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    aria-expanded="false"
    mdbDropdownToggle
  >
    <i class="fa fa-cog"></i>
  </button>
  <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

app.component.ts

import {Component, ViewChild} from '@angular/core';
import {MdbDropdownDirective} from 'mdb-angular-ui-kit/dropdown';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'mdbTest';
}

styles.css

/* You can add global styles to this file, and also import other style files */
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

@import '~mdb-angular-ui-kit/assets/scss/mdb.scss';

package.json

{
  "name": "mdb-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/cdk": "^12.0.0",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "mdb-angular-ui-kit": "^1.0.0-beta6",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "~12.0.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}