Badge from angular material not working

Question

I upgraded angular material to 6.0.2 and I want to use badge feature but it is not shown in my page. The package config looks like:

{
    "name": "my.angular",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^6.0.2",
        "@angular/cdk": "^6.0.2",
        "@angular/common": "^6.0.2",
        "@angular/compiler": "^6.0.2",
        "@angular/core": "^6.0.2",
        "@angular/flex-layout": "^5.0.0-beta.14",
        "@angular/forms": "^6.0.2",
        "@angular/http": "^6.0.2",
        "@angular/material": "^6.0.2",
        "@angular/platform-browser": "^6.0.2",
        "@angular/platform-browser-dynamic": "^6.0.2",
        "@angular/router": "^6.0.2",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "ngx-cookie-service": "^1.0.10",
        "rxjs": "^6.1.0",
        "rxjs-compat": "^6.1.0",
        "zone.js": "^0.8.19"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^0.6.3",
        "@angular/cli": "^6.0.2",
        "@angular/compiler-cli": "^6.0.2",
        "@angular/language-service": "^6.0.2",
        "@types/jasmine": "~2.8.3",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "^4.0.1",
        "jasmine-core": "~2.8.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~2.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~4.1.0",
        "tslint": "~5.9.1",
        "typescript": "^2.7.2"
    }
}

and I wrote:

<span matBadge="4" matBadgeOverlap="false">Text with a badge</span>

But the badge is not shown, just simple text.

Why ? Of course I imported angular material module, I used mat-button and other components from angular material.

I created the stackblitz.

Answer 1

You need to import MatBadgeModule in order to use it.

import {
  ...
  MatBadgeModule,
  ...
} from '@angular/material';

@NgModule({
  exports: [
    ...
    MatBadgeModule,
    ...
  ]
})
export class MaterialModule { }

Also, you will need to import theme style of angular/material in styles.css.

styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

See fixed demo.