Using MatToolTip with icons in Angular 5

For anyone looking to bind variable to matTooltip, you need to bind it using expression [matTooltip] so it will look something like this:

<mat-icon class='colorInfo' [matTooltip]="tooltipVariable">info_outline</mat-icon>

For anyone stuck with tooltips not working, please double-check your app.module.ts file. Make sure that your imports: [...] array includes MatTooltipModule, and that you are importing MatTooltipModule with the other imports.

If you don't include these things, tooltips simply won't work, yet there will also be no errors in the console.

I got stuck wondering why my <mat-icon matTooltip="test">warning</mat-icon> wasn't working, turns out this is why.

Just use the official material icon element:

<mat-icon matTooltip="My tooltip">delete</mat-icon>

You can of course style it however you want, enclose it in a div and give that div a class, add event listeners, etc.