Добавление matRipple к элементам mat-fab и div не дает волнистости

Question

Я новичок в Angular Материал (и Angular в целом); и я пытаюсь добавить волновой эффект к элементу mat-fab в Angular (v9.1.2). При щелчке он не отображает рябь.

Вот мой код.

hello.component. html

<div class="test-div">
  <div matRipple></div>
  Test ripple in a div
</div>

<div class="fab-wrapper">
    <button mat-fab color="accent">
      <div matRipple></div>
      <mat-icon>add</mat-icon>
    </button>
</div>

hello.component.s css

h1 { font-family: Lato; }

:host {
  --page-spacing: 10px;

  .fab-wrapper {
    position: fixed;
    bottom: calc(var(--page-spacing) * 3);
    right: calc(var(--page-spacing) * 3);
  }

  .test-div {
    background-color: lightblue;
  }
}

hello.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styleUrls: [
    './hello.component.scss'
  ]
})
export class HelloComponent  {
  @Input() name: string;
}

Я добавил MatRippleModule и MatButtonModule, импортированные в мой app.module.ts.

Вот проект StackBlitz, который я собрал:

https://stackblitz.com/edit/angular-umswvs