@vendasta/store/addon-list/addon-list.component.html

<mat-list *ngIf="addons" class="addon-list">
    <mat-divider></mat-divider>
    <ng-container *ngFor="let addon of addons">
        <mat-list-item (click)="onClick(addon.addonId)">
            <div class="addon-icon-title">
                <img *ngIf="addon.icon;else noIcon" class="addon-icon" [src]="addon.icon" mat-list-avatar/>
                <ng-template #noIcon>
                    <mat-icon class="addon-default-icon" mat-list-icon>add_circle</mat-icon>
                </ng-template>
                <div class="addon-title-tagline">
                    <p class="addon-title" matLine>{{ addon.title }} </p>
                    <p class="addon-tagline" matLine>{{ addon.tagline }}</p>
                </div>
            </div>
            <div *ngIf="showPricing" class="price-section">
                <va-pricing
                    [pricing]="getDisplayPricing(addon)"
                    [highlightPrice]="false"
                    [hasVerifiedContract]="_hasVerifiedContract"
                    [billedProduct]="getBilledProduct(addon)"
                    [loaded]="isBilledProductLoaded(addon)">
                </va-pricing>
            </div>
        </mat-list-item>
        <mat-divider></mat-divider>
    </ng-container>
</mat-list>