browser/libs/angular/src/vault/components/icon.component.html

<!-- Applying width and height styles directly to synchronize icon sizing between web/browser/desktop -->
<div class="tw-flex tw-justify-center tw-items-center" [ngStyle]="iconStyle()" aria-hidden="true">
  <ng-container *ngIf="data$ | async as data">
    @if (data.imageEnabled && data.image) {
      <img
        [src]="data.image"
        class="tw-rounded-md"
        alt=""
        decoding="async"
        loading="lazy"
        [ngClass]="{
          'tw-invisible tw-absolute': !imageLoaded(),
          'tw-size-6': !coloredIcon(),
        }"
        [ngStyle]="iconStyle()"
        (load)="imageLoaded.set(true)"
        (error)="imageLoaded.set(false)"
      />
    }
    @if (!data.imageEnabled || !data.image || !imageLoaded()) {
      <div
        [ngClass]="{
          'tw-flex tw-items-center tw-justify-center': coloredIcon(),
          'tw-bg-illustration-bg-primary tw-rounded-full':
            data.icon?.startsWith('bwi-') && coloredIcon(),
        }"
        [ngStyle]="iconStyle()"
      >
        <i
          class="tw-text-muted bwi bwi-lg {{ data.icon }}"
          [ngStyle]="{
            color: coloredIcon() ? 'rgb(var(--color-illustration-outline))' : null,
            width: data.icon?.startsWith('credit-card') && coloredIcon() ? '36px' : null,
            height: data.icon?.startsWith('credit-card') && coloredIcon() ? '30px' : null,
            fontSize: size() ? size() + 'px' : null,
          }"
        ></i>
      </div>
    }
  </ng-container>
</div>