[CL-581] Update svgs to new designs and make responsive (#16219)

libs/angular/src/auth/components/two-factor-icon.component.html

@@ -1,12 +1,7 @@
 <ng-container>
-  <!-- TOTP Authenticator -->
-  <bit-icon [icon]="Icons.TOTPIcon" *ngIf="provider == 0"></bit-icon>
-  <!-- Email -->
-  <bit-icon [icon]="Icons.EmailIcon" *ngIf="provider == 1"></bit-icon>
-  <!-- Webauthn -->
-  <bit-icon [icon]="Icons.WebAuthnIcon" *ngIf="provider == 7"></bit-icon>
-  <!-- Recovery Code -->
-  <bit-icon [icon]="Icons.RecoveryCodeIcon" *ngIf="provider == 'rc'"></bit-icon>
+  <div class="tw-size-[70px] tw-content-center" *ngIf="!!IconProviderMap[provider]">
+    <bit-icon [icon]="IconProviderMap[provider]"></bit-icon>
+  </div>
   <!-- Other 2FA Types (Duo, Yubico, U2F as PNG) -->
   <img
     [class]="'mfaType' + provider"

libs/angular/src/auth/components/two-factor-icon.component.ts

@@ -2,7 +2,12 @@
 // @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 
-import { EmailIcon, RecoveryCodeIcon, TOTPIcon, WebAuthnIcon } from "@bitwarden/assets/svg";
+import {
+  Icon,
+  TwoFactorAuthAuthenticatorIcon,
+  TwoFactorAuthEmailIcon,
+  TwoFactorAuthWebAuthnIcon,
+} from "@bitwarden/assets/svg";
 
 @Component({
   selector: "auth-two-factor-icon",
@@ -13,11 +18,10 @@ export class TwoFactorIconComponent {
   @Input() provider: any;
   @Input() name: string;
 
-  protected readonly Icons = {
-    TOTPIcon,
-    EmailIcon,
-    WebAuthnIcon,
-    RecoveryCodeIcon,
+  protected readonly IconProviderMap: { [key: number | string]: Icon } = {
+    0: TwoFactorAuthAuthenticatorIcon,
+    1: TwoFactorAuthEmailIcon,
+    7: TwoFactorAuthWebAuthnIcon,
   };
 
   constructor() {}

libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
-import { NoAccess } from "@bitwarden/assets/svg";
+import { DeactivatedOrg } from "@bitwarden/assets/svg";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import {
@@ -112,7 +112,7 @@ export class SetInitialPasswordComponent implements OnInit {
       this.userType = SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER_UNTRUSTED_DEVICE;
       this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
         pageTitle: { key: "unableToCompleteLogin" },
-        pageIcon: NoAccess,
+        pageIcon: DeactivatedOrg,
       });
     }
 

libs/angular/src/billing/components/invoices/no-invoices.component.ts

@@ -1,15 +1,14 @@
 import { Component } from "@angular/core";
 
-import { PartnerTrustIcon } from "@bitwarden/assets/svg";
+import { CreditCardIcon } from "@bitwarden/assets/svg";
 
 @Component({
   selector: "app-no-invoices",
-  template: `<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
-    <bit-icon [icon]="icon"></bit-icon>
-    <p class="tw-mt-4">{{ "noInvoicesToList" | i18n }}</p>
-  </div>`,
+  template: `<bit-no-items [icon]="icon">
+    <div slot="title">{{ "noInvoicesToList" | i18n }}</div>
+  </bit-no-items>`,
   standalone: false,
 })
 export class NoInvoicesComponent {
-  icon = PartnerTrustIcon;
+  icon = CreditCardIcon;
 }

libs/angular/src/jslib.module.ts

@@ -27,6 +27,7 @@ import {
   TypographyModule,
   CopyClickDirective,
   A11yTitleDirective,
+  NoItemsModule,
 } from "@bitwarden/components";
 
 import { TwoFactorIconComponent } from "./auth/components/two-factor-icon.component";
@@ -77,6 +78,7 @@ import { IconComponent } from "./vault/components/icon.component";
     TypographyModule,
     TableModule,
     MenuModule,
+    NoItemsModule,
     IconButtonModule,
     IconModule,
     LinkModule,