added the option to disbale an icon-button

src/app/shared-components/icon-button/icon-button.component.html

@@ -1,3 +1,3 @@
-<button matRipple>
+<button matRipple [class]="!disabled ? 'hover-effect' : ''">
   <img [src]="'assets/icons/UIIcons/' + icon + '.svg'" [alt]="icon" />
 </button>

src/app/shared-components/icon-button/icon-button.component.scss

@@ -9,7 +9,10 @@ button {
   background-color: transparent;
   transition: all 0.25s ease;
   border-radius: 10px !important;
-  &:hover {
-    background-color: rgba(211, 211, 211, 0.5);
-  }
+  cursor: default;
+}
+
+.hover-effect:hover {
+  background-color: rgba(211, 211, 211, 0.5);
+  cursor: pointer;
 }

src/app/shared-components/icon-button/icon-button.component.ts

@@ -7,4 +7,5 @@ import { Component, Input } from '@angular/core';
 })
 export class IconButtonComponent {
   @Input() icon!: string;
+  @Input() disabled: boolean = false;
 }