Add restricted view and manage permission to access

libs/ui/src/lib/access-level-icon/access-level-icon.component.html

@@ -1,19 +1,19 @@
 <span class="align-items-center d-flex">
   @switch (accessLevel()) {
     @case ('CREATE_READ_RESTRICTED_UPDATE_DELETE') {
-      <ion-icon class="mr-1" name="lock-closed-outline" />
+      <span aria-hidden="true" class="mr-1">🔏</span>
       <ng-container i18n>Restricted view and manage</ng-container>
     }
     @case ('CREATE_READ_UPDATE_DELETE') {
-      <ion-icon class="mr-1" name="create-outline" />
+      <span aria-hidden="true" class="mr-1">🖋️</span>
       <ng-container i18n>View and manage</ng-container>
     }
     @case ('READ') {
-      <ion-icon class="mr-1" name="lock-open-outline" />
+      <span aria-hidden="true" class="mr-1">🔓</span>
       <ng-container i18n>View</ng-container>
     }
     @case ('READ_RESTRICTED') {
-      <ion-icon class="mr-1" name="lock-closed-outline" />
+      <span aria-hidden="true" class="mr-1">🔒</span>
       <ng-container i18n>Restricted view</ng-container>
     }
   }

libs/ui/src/lib/access-level-icon/access-level-icon.component.stories.ts

@@ -1,5 +1,4 @@
 import { CommonModule } from '@angular/common';
-import { IonIcon } from '@ionic/angular/standalone';
 import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -10,7 +9,7 @@ export default {
   component: GfAccessLevelIconComponent,
   decorators: [
     moduleMetadata({
-      imports: [CommonModule, IonIcon]
+      imports: [CommonModule]
     })
   ],
   argTypes: {

libs/ui/src/lib/access-level-icon/access-level-icon.component.ts

@@ -1,24 +1,12 @@
 import { AccessLevel } from '@ghostfolio/common/types';
 
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { IonIcon } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import {
-  createOutline,
-  lockClosedOutline,
-  lockOpenOutline
-} from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [IonIcon],
   selector: 'gf-access-level-icon',
   templateUrl: './access-level-icon.component.html'
 })
 export class GfAccessLevelIconComponent {
   public readonly accessLevel = input.required<AccessLevel>();
-
-  public constructor() {
-    addIcons({ createOutline, lockClosedOutline, lockOpenOutline });
-  }
 }