you can pass an icon in the button and display it on the right or left

frontend/src/app/components/auth/auth.component.html

@@ -36,6 +36,9 @@
     </div>
     <app-btn-large
       [value]="'Sign Up'"
+      [imgPath]="'play'"
+      [imgPath]="'arrow_right'"
+      [imgReverse]="true"
       [disabled]="!isUserEmailValid(authData.mail) && authData.mail.length > 0"
     ></app-btn-large>
   </form>

frontend/src/app/components/auth/auth.component.scss

@@ -31,7 +31,7 @@ form {
   width: 500px;
   padding: 24px;
   input {
-    width: 70%;
+    width: 65%;
     padding: 12px 18px;
     margin: 8px 0;
     color: $white;

frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html

@@ -8,7 +8,11 @@
     <div class="description">
       {{ currentMovie[0].description }}
     </div>
-    <app-btn-large [value]="'Play'"></app-btn-large>
+    <app-btn-large
+      [value]="'Play'"
+      [imgPath]="'play'"
+      [imgReverse]="true"
+    ></app-btn-large>
   </div>
   }
 </section>

frontend/src/app/shared/components/btn-large/btn-large.component.html

@@ -1,3 +1,13 @@
-<button class="btn" type="{{ type }}" [disabled]="disabled">
+<button
-  {{ value }}
+  class="btn"
+  type="{{ type }}"
+  [disabled]="disabled"
+  [ngClass]="{ reverse: imgReverse }"
+>
+  <img
+    src="./../../../../assets/img/{{ imgPath }}.svg"
+    alt="{{ imgPath }}"
+    class="icon"
+  />
+  <p>{{ value }}</p>
 </button>

frontend/src/app/shared/components/btn-large/btn-large.component.scss

@@ -1,27 +1,54 @@
 @import "./../../../../assets/style/colors.scss";
 
 .btn {
+  display: flex;
+  align-items: center;
   padding: 12px 24px;
   width: fit-content;
-  box-shadow: 1px 1px 3px rgba($black, 0.5);
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   border-radius: 24px;
-  color: $white;
+  background-color: blue;
-  background-color: $blue;
+  border: 1px solid blue;
-  border: 1px solid $blue;
+  transition: 300ms ease-in-out;
-  font-size: 18px;
-  font-weight: 600;
-  transition: background-color 300ms ease-in-out, color 300ms ease-in-out,
-    border 300ms ease-in-out;
   cursor: pointer;
+  p {
+    color: white;
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 4px 0 0;
+  }
   &:not(:disabled):hover {
-    color: $blue;
+    background-color: white;
-    background-color: $white;
+    border: 1px solid blue;
-    border: 1px solid $blue;
+    p {
+      transition: 300ms ease-in-out;
+      color: blue;
+    }
+    .icon {
+      transition: 300ms ease-in-out;
+      filter: brightness(0) saturate(100%) invert(26%) sepia(77%)
+        saturate(2342%) hue-rotate(228deg) brightness(83%) contrast(115%);
+    }
   }
   &:disabled {
-    background-color: $light-blue;
+    background-color: lightblue;
-    color: darken($white, 10%);
+    color: darken(white, 10%);
-    border: 1px solid $light-blue;
+    border: 1px solid lightblue;
     cursor: default;
   }
+  .icon {
+    height: 24px;
+    width: auto;
+    margin: 0 4px 0 0;
+  }
+  &.reverse {
+    flex-direction: row-reverse;
+  }
+  &.reverse .icon {
+    margin-right: 0;
+    margin: 0 0 0 4px;
+  }
+  &.reverse p {
+    margin: 0 0 0 4px;
+  }
 }

frontend/src/app/shared/components/btn-large/btn-large.component.ts

@@ -11,5 +11,7 @@ import { Component, Input } from '@angular/core';
 export class BtnLargeComponent {
   @Input() type: string = '';
   @Input() value: string = '';
+  @Input() imgPath: string = '';
+  @Input() imgReverse: boolean = false;
   @Input() disabled: boolean = false;
 }

frontend/src/app/shared/components/header/header.component.html

@@ -4,7 +4,11 @@
     <img src="./../../../../assets/img/logo_ci.svg" alt="" />
   </div>
   <div class="btn">
-    <app-btn-large [value]="'Log Out'" routerLink="/logout"></app-btn-large>
+    <app-btn-large
+      [value]="'Log Out'"
+      [imgPath]="'logout'"
+      routerLink="/logout"
+    ></app-btn-large>
   </div>
   } @else {
   <div class="logo" routerLink="/">

frontend/src/assets/img/arrow_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>

frontend/src/assets/img/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/></svg>

frontend/src/assets/img/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M320-200v-560l440 280-440 280Zm80-280Zm0 134 210-134-210-134v268Z"/></svg>