Icon buttons

demo.component.html
<button ftui-button [icon]="faSave" template="success">
    app.common.save
</button>
ESLint may inform you that <button> needs a type, but htis attribute will already be set by the ftui-button directive.
demo.component.ts
import { faSave } from "@fortawesome/pro-solid-svg-icons";

//...

    protected faSave = faSave;

Always assign the actual IconDefinition to the [icon] binding instead of passing an IconProp to the property binding. That way, icons are imported where they are used, which makes housekeeping unused imports easier.

Pending buttons

button 1
demo.component.html
<button
    ftui-button
    (click)="refresh()"
    [pending]="isRefreshing$|async"
    [icon]="faRotateRight">
    app.common.refresh
</button>
demo.component.ts
    private _isRefreshing$ = new BehaviorSubject<boolean>(false);
    protected isRefreshing$ = this._isRefreshing$.asObservable();

    refresh() {
        this._isRefreshing$.next(true);
        setTimeout(() => {
            this._isRefreshing$.next(false);
        }, 2000);
    }
FTUI2’s Resource provide a indexPending$ and savePending$ observable out of the box.