TALY - The Allianz Library
  1. Components
  2. AclIconComponent

File

libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts

Implements

OnChanges

Metadata

selector acl-icon
styleUrls ./acl-icon.component.scss
templateUrl ./acl-icon.component.html

Index

Properties
Methods
Inputs
HostBindings

Inputs

name
Type : AclIconName
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:11
size
Type : string
Default value : '24'
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:13
title
Type : string
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:12

HostBindings

style.height.px
Type : string
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:17
style.width.px
Type : string
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:16
title
Type : string
Default value : ''
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:15

Methods

validateIconExists
validateIconExists(name: AclIconName)
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:36
Parameters :
Name Type Optional
name AclIconName No
Returns : void

Properties

availableIcons
Type : AclIconName[]
Default value : Object.values(AclIconName).filter( (x) => typeof x === 'string' ) as AclIconName[]
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:19
Public heightPx
Type : string
Decorators :
@HostBinding('style.height.px')
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:17
Public hostTitle
Type : string
Default value : ''
Decorators :
@HostBinding('title')
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:15
Public widthPx
Type : string
Decorators :
@HostBinding('style.width.px')
Defined in libs/acl/angular/src/lib/acl-icon/acl-icon.component.ts:16
 
import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AclIconName } from './acl-icon.interface';

@Component({
  selector: 'acl-icon',
  templateUrl: './acl-icon.component.html',
  styleUrls: ['./acl-icon.component.scss'],
  standalone: false
})
export class AclIconComponent implements OnChanges {
  @Input() name!: AclIconName;
  @Input() title?: string;
  @Input() size = '24';

  @HostBinding('title') public hostTitle = '';
  @HostBinding('style.width.px') public widthPx!: string;
  @HostBinding('style.height.px') public heightPx!: string;

  availableIcons: AclIconName[] = Object.values(AclIconName).filter(
    (x) => typeof x === 'string'
  ) as AclIconName[];

  ngOnChanges(changes: SimpleChanges) {
    if (changes['title']?.currentValue) {
      this.hostTitle = changes['title'].currentValue;
    }
    if (changes['size']?.currentValue) {
      this.widthPx = changes['size'].currentValue;
      this.heightPx = changes['size'].currentValue;
    }
    if (changes['name']?.currentValue) {
      this.validateIconExists(changes['name'].currentValue);
    }
  }

  validateIconExists(name: AclIconName) {
    if (!this.availableIcons.includes(name)) {
      throw new Error(
        `acl-icon component error: ${name} is not a valid icon name. Must be one of: ${this.availableIcons.join(
          ', '
        )}`
      );
    }
  }
}

<ng-container [ngSwitch]="name">
  <svg
    *ngSwitchCase="'acl'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5 3.62791C5 3.28112 5.30329 3 5.67742 3H13.8065C13.9807 3 14.1396 3.06099 14.2597 3.16121L14.2597 3.16113L18.7759 6.92857L18.755 6.95005C18.9047 7.06522 19 7.239 19 7.4334V20.3721C19 20.7189 18.6967 21 18.3226 21H5.67742C5.30329 21 5 20.7189 5 20.3721V3.62791ZM14.4839 6.8055V5.03765L16.603 6.8055H14.4839ZM6.35484 4.25581V19.7442H17.6452V8.06131H13.8065C13.4323 8.06131 13.129 7.78019 13.129 7.4334V4.25581H6.35484ZM14.213 17.3447C14.0733 17.5278 13.8902 17.6818 13.6638 17.8068C13.4374 17.9274 13.1484 17.9877 12.7967 17.9877C12.4981 17.9877 12.2259 17.9274 11.9802 17.8068C11.7394 17.6818 11.5322 17.5099 11.3588 17.2911C11.1854 17.0679 11.0505 16.8044 10.9542 16.5008C10.8578 16.1927 10.8096 15.8556 10.8096 15.4894C10.8096 15.1188 10.8578 14.7795 10.9542 14.4714C11.0505 14.1633 11.1854 13.8999 11.3588 13.6811C11.5322 13.4623 11.7394 13.2926 11.9802 13.172C12.2259 13.0515 12.4981 12.9912 12.7967 12.9912C13.1388 12.9912 13.423 13.0493 13.6494 13.1654C13.8806 13.277 14.0661 13.4176 14.2058 13.5873L13.5844 14.3642C13.4976 14.2571 13.3989 14.1722 13.2881 14.1097C13.1821 14.0472 13.0472 14.016 12.8834 14.016C12.7293 14.016 12.5944 14.0539 12.4788 14.1298C12.368 14.2057 12.2717 14.3107 12.1898 14.4446C12.1127 14.5741 12.0549 14.7304 12.0164 14.9134C11.9778 15.092 11.9585 15.284 11.9585 15.4894C11.9585 15.6948 11.9778 15.8868 12.0164 16.0654C12.0549 16.244 12.1127 16.4003 12.1898 16.5343C12.2717 16.6682 12.3704 16.7732 12.486 16.8491C12.6016 16.925 12.7365 16.9629 12.8907 16.9629C13.0448 16.9629 13.1797 16.9272 13.2953 16.8558C13.4109 16.7843 13.5025 16.6995 13.5699 16.6013L14.213 17.3447ZM9.76834 17.8604L9.55879 16.9964H8.40989L8.20034 17.8604H7.04421L8.28705 13.1185H9.73943L10.975 17.8604H9.76834ZM9.0024 14.1499H8.9735L8.53995 16.1659H9.41427L9.0024 14.1499ZM14.3555 13.1185V17.8604H16.8917V16.8692H15.5261V13.1185H14.3555ZM11.9999 8.02327H7.48381V6.76746H11.9999V8.02327ZM7.48381 10.9534H16.5161V9.69763H7.48381V10.9534Z"
      fill="#FFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'arrow-down'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M8 9L12 15L16 9H8Z" fill="#FFFFFF" />
  </svg>
  <svg
    *ngSwitchCase="'arrow-up'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M16 15L12 9L8 15H16Z" fill="#FFFFFF" />
  </svg>
  <svg
    *ngSwitchCase="'attention'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="12" cy="12" r="8" fill="#C4C4C4" />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.25 7V14H12.75V7H11.25ZM11.25 15.5V17H12.75V15.5H11.25Z"
      fill="#202840"
    />
  </svg>
  <svg
    *ngSwitchCase="'check'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="12" cy="12" r="8" fill="#75F0C7" />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M16.6002 9.44999L12.1002 15.45C11.9768 15.6145 11.7914 15.7211 11.5872 15.7449C11.383 15.7688 11.1779 15.7078 11.02 15.5762L8.02002 13.0762L8.9803 11.9238L11.3738 13.9184L15.4002 8.54999L16.6002 9.44999Z"
      fill="#202840"
    />
  </svg>
  <svg
    *ngSwitchCase="'complete'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M16.1002 9.44999L11.6002 15.45C11.4768 15.6145 11.2914 15.7211 11.0872 15.7449C10.883 15.7688 10.6779 15.7078 10.52 15.5762L7.52002 13.0762L8.4803 11.9238L10.8738 13.9184L14.9002 8.54999L16.1002 9.44999Z"
      fill="#75F0C7"
    />
  </svg>
  <svg
    *ngSwitchCase="'copy'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M9 3.25C8.58579 3.25 8.25 3.58579 8.25 4V4.25H6C5.58579 4.25 5.25 4.58579 5.25 5V19C5.25 19.4142 5.58579 19.75 6 19.75H18C18.4142 19.75 18.75 19.4142 18.75 19V5C18.75 4.58579 18.4142 4.25 18 4.25H15.75V4C15.75 3.58579 15.4142 3.25 15 3.25H9ZM8.25 5.75V6C8.25 6.41421 8.58579 6.75 9 6.75H15C15.4142 6.75 15.75 6.41421 15.75 6V5.75H17.25V18.25H6.75V5.75H8.25ZM8 10.75H16V9.25H8V10.75ZM16 13.75H8V12.25H16V13.75ZM8 16.75H14V15.25H8V16.75Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'drag-all-sides'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M8.5 8.5H5.5V5.5H8.5V8.5ZM13.5 8.5H10.5V5.5H13.5V8.5ZM15.5 8.5H18.5V5.5H15.5V8.5ZM8.5 13.5H5.5V10.5H8.5V13.5ZM10.5 13.5H13.5V10.5H10.5V13.5ZM18.5 13.5H15.5V10.5H18.5V13.5ZM5.5 18.5H8.5V15.5H5.5V18.5ZM13.5 18.5H10.5V15.5H13.5V18.5ZM15.5 18.5H18.5V15.5H15.5V18.5Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'drag-vertical'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M18 8.75H6V7.25H18V8.75ZM18 12.75H6V11.25H18V12.75ZM6 16.75H18V15.25H6V16.75Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'duplicate'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M18 16.75C18.4142 16.75 18.75 16.4142 18.75 16V5C18.75 4.58579 18.4142 4.25 18 4.25H9C8.58579 4.25 8.25 4.58579 8.25 5V5.91667H9.75V5.75H17.25V15.25H16.3636V16.75H18ZM6 7.25C5.58579 7.25 5.25 7.58579 5.25 8V19C5.25 19.4142 5.58579 19.75 6 19.75H15C15.4142 19.75 15.75 19.4142 15.75 19V8C15.75 7.58579 15.4142 7.25 15 7.25H6ZM6.75 18.25V8.75H14.25V18.25H6.75Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'eyebig-closed'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M6.74653 13.9376C8.10599 15.1371 9.93369 16.25 12.0003 16.25C14.0669 16.25 15.8946 15.1371 17.2541 13.9376C17.9255 13.3452 18.4604 12.751 18.8272 12.3049C19.0102 12.0824 19.1502 11.8981 19.2432 11.7713C19.2896 11.7079 19.3243 11.659 19.3467 11.627L19.3709 11.5919L19.376 11.5844L19.3817 11.5882C19.4034 11.6026 19.507 11.6711 20.0003 12C20.6244 12.416 20.6242 12.4162 20.6241 12.4165L20.6227 12.4185L20.6198 12.4228L20.6103 12.4368C20.6024 12.4484 20.5912 12.4647 20.5768 12.4853C20.5481 12.5265 20.5066 12.585 20.4528 12.6583C20.3453 12.805 20.1883 13.0113 19.9859 13.2576C19.6689 13.6431 19.2374 14.1298 18.7063 14.6392L21.4771 16.921L20.5235 18.0789L17.5552 15.6344C16.7955 16.2223 15.8998 16.7836 14.8936 17.1801L16.1898 20.2045L14.811 20.7954L13.4449 17.6078C12.9803 17.6991 12.4982 17.75 12.0003 17.75C11.3376 17.75 10.7027 17.6599 10.1 17.504L8.68945 20.7954L7.31074 20.2045L8.68369 17.001C7.84829 16.6231 7.09684 16.1385 6.44535 15.6344L3.47698 18.0789L2.52342 16.921L5.29426 14.6391C4.76316 14.1298 4.33172 13.6431 4.01475 13.2576C3.81229 13.0113 3.65537 12.805 3.54786 12.6583C3.49407 12.585 3.45257 12.5265 3.42383 12.4853C3.40945 12.4647 3.39827 12.4484 3.39032 12.4368L3.38085 12.4228L3.37795 12.4185L3.37696 12.417C3.3768 12.4168 3.37628 12.416 4.00032 12C4.62435 11.584 4.62424 11.5838 4.62413 11.5836L4.62972 11.5919L4.65396 11.627C4.67632 11.659 4.71099 11.7079 4.75746 11.7713C4.85047 11.8981 4.99042 12.0824 5.17339 12.3049C5.54019 12.751 6.07518 13.3452 6.74653 13.9376Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'eyebig'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5.17307 12.3049C5.08083 12.1927 4.99952 12.0903 4.92964 12C4.99952 11.9097 5.08083 11.8073 5.17307 11.6951C5.53987 11.249 6.07487 10.6547 6.74622 10.0624C8.10567 8.86286 9.93338 7.75 12 7.75C14.0666 7.75 15.8943 8.86286 17.2538 10.0624C17.9251 10.6547 18.4601 11.249 18.8269 11.6951C18.9192 11.8073 19.0005 11.9097 19.0704 12C19.0005 12.0903 18.9192 12.1927 18.8269 12.3049C18.4601 12.751 17.9251 13.3453 17.2538 13.9376C15.8943 15.1371 14.0666 16.25 12 16.25C9.93338 16.25 8.10567 15.1371 6.74622 13.9376C6.07487 13.3453 5.53987 12.751 5.17307 12.3049ZM20 12C20.624 11.584 20.6239 11.5838 20.6237 11.5835L20 12ZM20.6237 11.5835C20.7917 11.8354 20.792 12.1641 20.624 12.416L20 12C20.624 12.416 20.6235 12.4168 20.6234 12.417L20.6224 12.4185L20.6195 12.4228L20.61 12.4368C20.6021 12.4485 20.5909 12.4647 20.5765 12.4853C20.5478 12.5265 20.5062 12.585 20.4525 12.6584C20.3449 12.805 20.188 13.0114 19.9856 13.2576C19.5815 13.749 18.9915 14.4047 18.2462 15.0624C16.7723 16.3629 14.6 17.75 12 17.75C9.39996 17.75 7.22766 16.3629 5.75378 15.0624C5.00847 14.4047 4.41846 13.749 4.01443 13.2576C3.81198 13.0114 3.65506 12.805 3.54754 12.6584C3.49375 12.585 3.45225 12.5265 3.42351 12.4853C3.40914 12.4647 3.39795 12.4485 3.39001 12.4368L3.38053 12.4228L3.37763 12.4185L3.37664 12.417L3.37596 12.416L3.99956 12.0003C3.38002 12.4133 3.37583 12.4158 3.37596 12.416L3.37596 12.416C3.20801 12.1641 3.20801 11.8359 3.37596 11.584L4 12C3.37596 11.584 3.37648 11.5832 3.37664 11.583L3.37763 11.5815L3.38053 11.5772L3.39001 11.5632C3.39795 11.5515 3.40914 11.5353 3.42351 11.5147C3.45225 11.4735 3.49375 11.415 3.54754 11.3416C3.65506 11.195 3.81198 10.9886 4.01443 10.7424C4.41846 10.251 5.00847 9.59525 5.75378 8.93762C7.22766 7.63714 9.39996 6.25 12 6.25C14.6 6.25 16.7723 7.63714 18.2462 8.93762C18.9915 9.59525 19.5815 10.251 19.9856 10.7424C20.188 10.9886 20.3449 11.195 20.4525 11.3416C20.5062 11.415 20.5478 11.4735 20.5765 11.5147C20.5909 11.5353 20.6021 11.5515 20.61 11.5632L20.6195 11.5772L20.6224 11.5815L20.6237 11.5835ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'eyesmall'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12 14.25C13.2426 14.25 14.25 13.2426 14.25 12C14.25 10.7574 13.2426 9.75 12 9.75C10.7574 9.75 9.75 10.7574 9.75 12C9.75 13.2426 10.7574 14.25 12 14.25Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'info'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12 4.75C7.99594 4.75 4.75 7.99594 4.75 12C4.75 16.0041 7.99594 19.25 12 19.25C16.0041 19.25 19.25 16.0041 19.25 12C19.25 7.99594 16.0041 4.75 12 4.75ZM3.25 12C3.25 7.16751 7.16751 3.25 12 3.25C16.8325 3.25 20.75 7.16751 20.75 12C20.75 16.8325 16.8325 20.75 12 20.75C7.16751 20.75 3.25 16.8325 3.25 12ZM11.25 17V10H12.75V17H11.25ZM11.25 7V8.5H12.75V7H11.25Z"
      fill="#668CFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'plus'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12 6.75C9.10051 6.75 6.75 9.10051 6.75 12C6.75 14.8995 9.10051 17.25 12 17.25C14.8995 17.25 17.25 14.8995 17.25 12C17.25 9.10051 14.8995 6.75 12 6.75ZM5.25 12C5.25 8.27208 8.27208 5.25 12 5.25C15.7279 5.25 18.75 8.27208 18.75 12C18.75 15.7279 15.7279 18.75 12 18.75C8.27208 18.75 5.25 15.7279 5.25 12ZM11.25 11.25V9H12.75V11.25H15V12.75H12.75V15H11.25V12.75H9V11.25H11.25Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'reload'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M7.75 12C7.75 9.65279 9.65279 7.75 12 7.75C13.2978 7.75 14.4605 8.33158 15.2406 9.25L14 9.25V10.75H17.25V7L15.75 7V7.64112C14.7436 6.7745 13.4333 6.25 12 6.25C8.82436 6.25 6.25 8.82436 6.25 12C6.25 15.1756 8.82436 17.75 12 17.75C14.359 17.75 16.3846 16.3295 17.2712 14.3003L15.8967 13.6997C15.2402 15.2023 13.7416 16.25 12 16.25C9.65279 16.25 7.75 14.3472 7.75 12Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'save-o'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    transform="scale(0.8)"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      fill="#FFFFFF"
      d="M18.844,2C19.031,2.036 19.207,2.114 19.358,2.229L21.763,4.634C21.914,4.784 21.998,4.988 21.997,5.201L22,5.201L22,19.995C21.997,21.091 21.096,21.992 20,21.995L4,21.995C2.904,21.992 2.003,21.091 2,19.995L2,3.995C2.004,2.9 2.905,2.001 4,2L18.844,2ZM16.4,20.395L16.4,13.595L7.6,13.595L7.6,20.395L16.4,20.395ZM20,20.395L20,20.395C20.218,20.392 20.397,20.213 20.4,19.995L20.4,5.533L18.462,3.595L17,3.595L17,7.995C16.998,8.543 16.548,8.993 16,8.995L8,8.995C7.452,8.993 7.001,8.543 7,7.995L7,3.595L4,3.595C3.782,3.598 3.603,3.777 3.6,3.995L3.6,19.995C3.603,20.213 3.782,20.392 4,20.395L6,20.395L6,12.995C6.002,12.448 6.453,11.999 7,12L17,12C17.547,11.999 17.998,12.448 18,12.995L18,20.395L20,20.395ZM15.4,7.395L15.4,3.595L8.6,3.595L8.6,7.395L15.4,7.395ZM13.692,4.648C14.244,4.648 14.692,5.096 14.692,5.648C14.692,6.2 14.244,6.648 13.692,6.648C13.14,6.648 12.692,6.2 12.692,5.648C12.692,5.096 13.14,4.648 13.692,4.648Z"
    />
  </svg>
  <svg
    *ngSwitchCase="'text-left'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path fill-rule="evenodd" clip-rule="evenodd" d="M20 8.25H4V6.75H20V8.25Z" fill="#FFFFFF" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 12.75H4V11.25H12V12.75Z" fill="#FFFFFF" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 17.25H4V15.75H16V17.25Z" fill="#FFFFFF" />
  </svg>
  <svg
    *ngSwitchCase="'text-right'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M4 8.25H20V6.75H4V8.25ZM12 12.75H20V11.25H12V12.75ZM20 17.25H8V15.75H20V17.25Z"
      fill="#FFFFFF"
    />
  </svg>
  <svg
    *ngSwitchCase="'view-deny'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12.0001 10.9164C10.5168 10.9164 9.18907 10.116 8.18379 9.229C7.68952 8.79288 7.29515 8.35491 7.0247 8.02599C6.88992 7.86206 6.78707 7.72663 6.71913 7.63399C6.68519 7.5877 6.66004 7.55221 6.64407 7.52931L6.62705 7.50467L6.62387 7.5C6.62399 7.50017 6.62411 7.50035 6.00007 7.91638C5.37603 8.3324 5.37652 8.33314 5.37667 8.33336L5.37755 8.33467L5.37999 8.3383L5.38765 8.3496L5.41393 8.38767C5.43629 8.4197 5.46827 8.46478 5.50952 8.52103C5.59197 8.63347 5.71179 8.79101 5.86606 8.97864C6.03117 9.17945 6.23709 9.41635 6.48028 9.67026L4.52344 11.2818L5.477 12.4397L7.59658 10.6941C8.04615 11.0531 8.56486 11.406 9.14287 11.698L8.19974 13.8986L9.57846 14.4895L10.5465 12.2308C11.007 12.3483 11.4926 12.4164 12.0001 12.4164C12.379 12.4164 12.7457 12.3784 13.099 12.3103L14.0329 14.4895L15.4116 13.8986L14.5344 11.8517C15.2433 11.5348 15.8719 11.1187 16.4036 10.6941L18.5233 12.4397L19.4768 11.2818L17.5199 9.6702C17.7631 9.41631 17.969 9.17944 18.1341 8.97864C18.2884 8.79101 18.4082 8.63347 18.4906 8.52103C18.5319 8.46478 18.5639 8.4197 18.5862 8.38767L18.6125 8.3496L18.6201 8.3383L18.6226 8.33467L18.6238 8.33284C18.624 8.33261 18.6241 8.3324 18.0001 7.91638C17.376 7.50035 17.3762 7.50017 17.3763 7.5L17.3731 7.50467L17.3561 7.52931C17.3401 7.55221 17.3149 7.5877 17.281 7.63399C17.2131 7.72663 17.1102 7.86206 16.9754 8.02599C16.705 8.35491 16.3106 8.79288 15.8164 9.229C14.8111 10.116 13.4834 10.9164 12.0001 10.9164Z"
      fill="#FFF"
    />
    <path d="M5 18L19 18" stroke="#FFF" stroke-width="1.5" />
    <path d="M17.5 16L19 18L17.5 20" stroke="#FFF" stroke-width="1.5" />
  </svg>
  <svg
    *ngSwitchCase="'view-grant'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M8.18372 10.8126C7.68945 10.3765 7.29508 9.93853 7.02463 9.60961C6.99327 9.57147 6.96364 9.53487 6.93578 9.5C6.96364 9.46513 6.99327 9.42853 7.02463 9.39039C7.29508 9.06147 7.68945 8.6235 8.18372 8.18738C9.189 7.30036 10.5167 6.5 12 6.5C13.4833 6.5 14.811 7.30036 15.8163 8.18738C16.3106 8.6235 16.7049 9.06147 16.9754 9.39039C17.0067 9.42853 17.0364 9.46512 17.0642 9.5C17.0364 9.53487 17.0067 9.57147 16.9754 9.60961C16.7049 9.93853 16.3106 10.3765 15.8163 10.8126C14.811 11.6996 13.4833 12.5 12 12.5C10.5167 12.5 9.189 11.6996 8.18372 10.8126ZM18 9.5C18.624 9.08397 18.6239 9.08376 18.6237 9.08354L18 9.5ZM18.6237 9.08354C18.7917 9.33546 18.792 9.6641 18.624 9.91603L18 9.5C18.624 9.91603 18.6235 9.91676 18.6234 9.91699L18.6225 9.91829L18.6201 9.92193L18.6124 9.93322L18.5861 9.97129C18.5638 10.0033 18.5318 10.0484 18.4905 10.1047C18.4081 10.2171 18.2883 10.3746 18.134 10.5623C17.8263 10.9365 17.3769 11.436 16.8087 11.9374C15.689 12.9254 14.0167 14 12 14C9.98329 14 8.311 12.9254 7.19128 11.9374C6.62305 11.436 6.17367 10.9365 5.86599 10.5623C5.71172 10.3746 5.5919 10.2171 5.50945 10.1047C5.4682 10.0484 5.43622 10.0033 5.41387 9.97129L5.38758 9.93322L5.37992 9.92193L5.37748 9.91829L5.37596 9.91603L6 9.5C5.37596 9.08397 5.37645 9.08324 5.3766 9.08301L5.37748 9.08171L5.37992 9.07807L5.38758 9.06678L5.41387 9.02871C5.43622 8.99667 5.4682 8.9516 5.50945 8.89534C5.5919 8.78291 5.71172 8.62537 5.86599 8.43773C6.17367 8.06353 6.62305 7.564 7.19128 7.06262C8.311 6.07464 9.98329 5 12 5C14.0167 5 15.689 6.07464 16.8087 7.06262C17.3769 7.564 17.8263 8.06353 18.134 8.43773C18.2883 8.62537 18.4081 8.78291 18.4905 8.89534C18.5318 8.9516 18.5638 8.99667 18.5861 9.02871L18.6124 9.06678L18.6201 9.07807L18.6225 9.08171L18.6237 9.08354ZM6 9.5C5.37991 9.9134 5.37584 9.91579 5.37596 9.91602L5.37596 9.91603C5.20801 9.6641 5.20801 9.3359 5.37596 9.08397L6 9.5ZM12 11.75C13.2426 11.75 14.25 10.7426 14.25 9.5C14.25 8.25736 13.2426 7.25 12 7.25C10.7574 7.25 9.75 8.25736 9.75 9.5C9.75 10.7426 10.7574 11.75 12 11.75Z"
      fill="#FFF"
    />
    <path d="M5 18H19" stroke="#FFF" stroke-width="1.5" />
    <path d="M17.5 16L19 18L17.5 20" stroke="#FFF" stroke-width="1.5" />
  </svg>
  <svg
    *ngSwitchCase="'waiting'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M6.75 12C6.75 9.10051 9.10051 6.75 12 6.75C14.8995 6.75 17.25 9.10051 17.25 12C17.25 14.8995 14.8995 17.25 12 17.25C9.10051 17.25 6.75 14.8995 6.75 12ZM12 5.25C8.27208 5.25 5.25 8.27208 5.25 12C5.25 15.7279 8.27208 18.75 12 18.75C15.7279 18.75 18.75 15.7279 18.75 12C18.75 8.27208 15.7279 5.25 12 5.25ZM11.25 8V12C11.25 12.1989 11.329 12.3897 11.4697 12.5303L13.4697 14.5303L14.5303 13.4697L12.75 11.6893V8H11.25Z"
      fill="#C4C4C4"
    />
  </svg>
  <svg
    *ngSwitchCase="'waste'"
    [style.width.px]="size"
    [style.height.px]="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M11.9999 5.75C11.5801 5.75 11.2229 6.01831 11.0905 6.39282H12.9093C12.7769 6.01831 12.4198 5.75 11.9999 5.75ZM14.4434 6.39282C14.2859 5.18373 13.252 4.25 11.9999 4.25C10.7479 4.25 9.71394 5.18373 9.55642 6.39282H7.05864L5.58398 7.37593L6.41603 8.624L7.51281 7.89282H16.4872L17.584 8.624L18.416 7.37593L16.9414 6.39282H14.4434ZM16.4261 17.1099L16.7493 9.02998L15.2505 8.97003L14.9273 17.05C14.9005 17.7204 14.3492 18.25 13.6783 18.25H10.3215C9.65057 18.25 9.0993 17.7204 9.07249 17.05L8.74929 8.97003L7.25049 9.02998L7.57369 17.1099C7.63268 18.5848 8.84546 19.75 10.3215 19.75H13.6783C15.1543 19.75 16.3671 18.5848 16.4261 17.1099ZM9.9647 17.2339L9.75049 9.01957L11.25 8.98047L11.4642 17.1948L9.9647 17.2339ZM12.7505 8.98041L12.5361 17.1947L14.0356 17.2339L14.25 9.01954L12.7505 8.98041Z"
      fill="#FFFFFF"
    />
  </svg>
</ng-container>

./acl-icon.component.scss 

:host {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""