title: Badge from angular material not working
body: <p>I upgraded angular material to 6.0.2 and I want to use <code>badge</code> feature but it is not shown in my page. The package config looks like:</p>
  
  <pre><code>{
      "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"
      }
  }
  </code></pre>
  
  <p>and I wrote:</p>
  
  <pre><code>&lt;span matBadge="4" matBadgeOverlap="false"&gt;Text with a badge&lt;/span&gt;
  </code></pre>
  
  <p>But the badge is not shown, just simple text.</p>
  
  <p>Why ? Of course I imported angular material module, I used <code>mat-button</code> and other components from angular material.</p>
  
  <p>I created the <a href="https://stackblitz.com/edit/angular-psjwpg" rel="noreferrer">stackblitz</a>.</p>