html - 在Angular 5中将MatToolTip与图标一起使用

我可以将MatToolTip和一个button元素一起使用:

<button mat-mini-fab color="primary" (click)="fn()">
                <span matTooltip="myMessage">
                  <i class="material-icons">delete</i>
                </span>
              </button>

但是在尝试将其与div或span标记内的图标一起使用时，它不起作用:

    <div matToolTip="myMessage">
      <i style="line-height: 0px; font-size: 25px; cursor: pointer; " (click)="fn()" class="material-icons">delete</i>
    </div>

我究竟做错了什么？

最佳答案

只需使用官方 Material 图标元素:
<mat-icon matTooltip="My tooltip">delete</mat-icon>
当然，您可以根据需要设置样式，将其包含在div中并为该div提供一个类，添加事件监听器，等等。