[Icons] Update font sheet (#582)

* Initial commit for icon update

* Updated lg to reflect current usage

* Created BitwardenIconsService

* Prettier updates

* More prettier updates

* Updated font

* Prettier

* Added new icons to service map

* Removed variables and converted css to use scss maps and exported list

* Updated font sheet (130)

* Removed base class and replaced bolt icon

* Added 3x icon size

* Added sm text size helper

* Added rotate 270 helper

* Prettier

* Updated font sheet

* Requested Changes

* Removed BitwardenIcons Util - obsolete

angular/src/components/callout.component.html

@@ -5,7 +5,7 @@
   [attr.role]="useAlertRole ? 'alert' : null"
 >
   <h3 class="callout-heading" *ngIf="title">
-    <i class="fa {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
+    <i class="{{ icon }}" *ngIf="icon" aria-hidden="true"></i>
     {{ title }}
   </h3>
   <div class="enforced-policy-options" *ngIf="enforcedPolicyOptions">

angular/src/components/callout.component.ts

@@ -36,7 +36,7 @@ export class CalloutComponent implements OnInit {
         this.title = this.i18nService.t("warning");
       }
       if (this.icon === undefined) {
-        this.icon = "fa-warning";
+        this.icon = "bwi-exclamation-triangle";
       }
     } else if (this.type === "error") {
       this.calloutStyle = "danger";
@@ -44,7 +44,7 @@ export class CalloutComponent implements OnInit {
         this.title = this.i18nService.t("error");
       }
       if (this.icon === undefined) {
-        this.icon = "fa-bolt";
+        this.icon = "bwi-error";
       }
     } else if (this.type === "tip") {
       this.calloutStyle = "success";
@@ -52,7 +52,7 @@ export class CalloutComponent implements OnInit {
         this.title = this.i18nService.t("tip");
       }
       if (this.icon === undefined) {
-        this.icon = "fa-lightbulb-o";
+        this.icon = "bwi-lightbulb";
       }
     }
   }

angular/src/components/icon.component.html

@@ -1,4 +1,4 @@
 <div class="icon" aria-hidden="true">
   <img [src]="image" appFallbackSrc="{{ fallbackImage }}" *ngIf="imageEnabled && image" alt="" />
-  <i class="fa fa-fw fa-lg {{ icon }}" *ngIf="!imageEnabled || !image"></i>
+  <i class="bwi-fw bwi-lg {{ icon }}" *ngIf="!imageEnabled || !image"></i>
 </div>

angular/src/components/icon.component.ts

@@ -9,15 +9,6 @@ import { StateService } from "jslib-common/abstractions/state.service";
 
 import { Utils } from "jslib-common/misc/utils";
 
-const IconMap: any = {
-  "fa-globe": String.fromCharCode(0xf0ac),
-  "fa-sticky-note-o": String.fromCharCode(0xf24a),
-  "fa-id-card-o": String.fromCharCode(0xf2c3),
-  "fa-credit-card": String.fromCharCode(0xf09d),
-  "fa-android": String.fromCharCode(0xf17b),
-  "fa-apple": String.fromCharCode(0xf179),
-};
-
 /**
  * Provides a mapping from supported card brands to
  * the filenames of icon that should be present in images/cards folder of clients.
@@ -59,25 +50,21 @@ export class IconComponent implements OnChanges {
     this.load();
   }
 
-  get iconCode(): string {
-    return IconMap[this.icon];
-  }
-
   protected load() {
     switch (this.cipher.type) {
       case CipherType.Login:
-        this.icon = "fa-globe";
+        this.icon = "bwi-globe";
         this.setLoginIcon();
         break;
       case CipherType.SecureNote:
-        this.icon = "fa-sticky-note-o";
+        this.icon = "bwi-sticky-note";
         break;
       case CipherType.Card:
-        this.icon = "fa-credit-card";
+        this.icon = "bwi-credit-card";
         this.setCardIcon();
         break;
       case CipherType.Identity:
-        this.icon = "fa-id-card-o";
+        this.icon = "bwi-id-card";
         break;
       default:
         break;
@@ -90,10 +77,10 @@ export class IconComponent implements OnChanges {
       let isWebsite = false;
 
       if (hostnameUri.indexOf("androidapp://") === 0) {
-        this.icon = "fa-android";
+        this.icon = "bwi-android";
         this.image = null;
       } else if (hostnameUri.indexOf("iosapp://") === 0) {
-        this.icon = "fa-apple";
+        this.icon = "bwi-apple";
         this.image = null;
       } else if (
         this.imageEnabled &&

angular/src/components/verify-master-password.component.html

@@ -24,7 +24,7 @@
       {{ "sendCode" | i18n }}
     </button>
     <span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
-      <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+      <i class="bwi-check-circle" aria-hidden="true"></i>
       {{ "codeSent" | i18n }}
     </span>
   </div>