Font Awesome + Angular: Empty Expressions are not allowed

Question

I am importing font awesome in my component like this (tried both separately):

import * as faInfoCircle from '@fortawesome/pro-solid-svg-icons/faInfoCircle';

import * as faInfoCircle from '@fortawesome/pro-regular-svg-icons/faInfoCircle';

defined in the class as:

faInfoCircle = faInfoCircle;

used in the template:

<mh1-icon-button [icon]="faInfoCircle"
[iconClasses]="['btn']"
(click)=""
[tooltip]="'this is a tooltip'"> test
</mh1-icon-button> 

I am getting this error:

    Uncaught Error: Uncaught (in promise): Error: Template parse errors:
    Empty expressions are not allowed ("n-button [icon]="faInfoCircle"
                      [iconClasses]="['btn']"
                      (click)="[ERROR ->]"
                      [tooltip]="'this is a tooltip'"> test
                      </mh1-icon-button>
    "): ng:///PressureModule/PressureDetailsComponent.html@250:27

Looking for an explanation / insight into why this error is occurring

Answer 1

Remove the (click) handler. As the error explains, it cannot be empty. This error has nothing to do with FontAwesome.