Angular Materialでバッジ付きアイコンボタンを作る

小ネタです。
Angular Materialを使ったアプリケーションで、通知件数などを表示するためのバッジを使いたい場面があったのですが、Angular Materialのコンポーネントが用意されていなかったので、既存のコンポーネントとCSSを組み合わせて作ってみました。

イメージ的にはこんな感じです。(画像はwantedlyのツールバー)

最終的にこんな感じになりました。

手順

HTML

まずは、html側です。
通常のIcon Buttonsをマークアップした後に、バッジの件数表示部分をspanとして追加します。ここでは表示を5としていますが、実際にはテンプレートで動的に変更できるようにするかと思います。

app.component.html

  <button mat-icon-button>
    <mat-icon class="icon">notifications</mat-icon>
    <span class="badge">5</span>
  </button>

CSS

次に、バッジをスタイリングするCSS側です。
こんな感じになりました。
地道にCSSを書いていくだけなのですが、バッジサイズに合わせて、 line-heightを指定するのがポイントかと思います。

バッチの

app.component.css

.badge {
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 12px;
  line-height: 13px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  background-color: #ff0000; 
  border: 4px solid #ff0000;
  color: #ffffff;
  text-align: center;
}

デモ

stackblitzに動くデモを作ってみました。
https://stackblitz.com/edit/angular-material-badge

※ ボタンを押すとバッジのカウントが上がり、バッジ自体をクリックするとカウントがクリアされます。

所感

stackblitzめちゃくちゃ便利。

以上です。