#10 resizing icons

src/app/about-window/about-window.component.html

@@ -1,5 +1,5 @@
 <div class="window">
-  <app-window-title-bar iconPath="assets/icons/about.png" title="About XPQuiz"></app-window-title-bar>
+  <app-window-title-bar iconPath="about.png" title="About XPQuiz"></app-window-title-bar>
   <div class="window-body">
     <label><b>XPQuiz</b>&nbsp;- Version 1.0.1</label>
     <label class="main">Created by&nbsp;<b><a href="https://isahann.github.io">Isahann Hanacleto</a></b></label>
@@ -13,7 +13,7 @@
       href="https://www.deviantart.com/marchmountain/art/Windows-XP-High-Resolution-Icon-Pack-916042853">marchmountain
       at DeviantArt</a></b></label>
 
-    <app-icon-button iconPath="assets/icons/home.png" title="Return to home"
+    <app-icon-button iconPath="home.png" title="Return to home"
                      (onButtonClick)="this.returnHome()"></app-icon-button>
   </div>
 </div>

src/app/common/icon-button/icon-button.component.html

@@ -1,6 +1,6 @@
 <button [disabled]="this.disabled" (click)="this.onClick()">
   <img
-    [ngSrc]="this.iconPath" [ngClass]="this.disabled ? 'disabled' : ''"
+    [ngSrc]="'assets/icons/20x20/' + this.iconPath" [ngClass]="this.disabled ? 'disabled' : ''"
     alt="" [height]="this.iconSize" [width]="this.iconSize"/>
   {{this.title}}
 </button>

src/app/common/window-title-bar/window-title-bar.component.html

@@ -1,7 +1,7 @@
 <div class="title-bar">
   <div class="title-bar-text">
     <img
-      [ngSrc]="this.iconPath"
+      [ngSrc]="'assets/icons/15x15/' + this.iconPath"
       alt="" [height]="this.iconSize" [width]="this.iconSize" />
     {{this.title}}
   </div>

src/app/correct-answer-window/correct-answer-window.component.html

@@ -1,13 +1,13 @@
 <div class="window">
-  <app-window-title-bar iconPath="assets/icons/success.png" title="You did it!"></app-window-title-bar>
+  <app-window-title-bar iconPath="success.png" title="You did it!"></app-window-title-bar>
   <div class="window-body">
     <div class="window-body_title">
       <label><b>Congratulations!</b></label>
       <label>You earned {{this.questionScore}} points!</label>
       <label>Come back in 3 hours for another question!</label>
     </div>
 
-    <app-icon-button iconPath="assets/icons/home.png" title="Return to home"
+    <app-icon-button iconPath="home.png" title="Return to home"
                      (onButtonClick)="this.returnHome()"></app-icon-button>
   </div>
 </div>

src/app/main-window/main-window.component.html

@@ -1,5 +1,5 @@
 <div class="window">
-  <app-window-title-bar iconPath="assets/icons/home.png" title="Welcome!"></app-window-title-bar>
+  <app-window-title-bar iconPath="home.png" title="Welcome!"></app-window-title-bar>
   <div class="window-body">
     <label>Welcome to &nbsp;<b>XPQuiz</b>!</label>
 
@@ -11,12 +11,12 @@
     </ng-container>
 
     <div class="window-body_buttons">
-      <app-icon-button iconPath="assets/icons/quiz.png" title="New quiz"
+      <app-icon-button iconPath="quiz.png" title="New quiz"
                        (onButtonClick)="this.redirectTo(PathsEnum.QUIZ)"
                        [disabled]="!this.quizCanBeAnswered"></app-icon-button>
-      <app-icon-button iconPath="assets/icons/score.png" title="My score"
+      <app-icon-button iconPath="score.png" title="My score"
                        (onButtonClick)="this.redirectTo(PathsEnum.SCORES)"></app-icon-button>
-      <app-icon-button iconPath="assets/icons/about.png" title="About"
+      <app-icon-button iconPath="about.png" title="About"
                        (onButtonClick)="this.redirectTo(PathsEnum.ABOUT)"></app-icon-button>
     </div>
   </div>

src/app/question-window/question-window.component.html

@@ -1,6 +1,6 @@
 <div class="host">
   <div class="window window_question">
-    <app-window-title-bar iconPath="assets/icons/question.png" title="Question!"></app-window-title-bar>
+    <app-window-title-bar iconPath="question.png" title="Question!"></app-window-title-bar>
     <div class="window-body window_question_body">
       <ng-container *ngIf="!this.questionLoaded">
         <div class="window_question_body_loading">
@@ -27,7 +27,7 @@
 
   <ng-container *ngIf="this.selectedAnswer">
     <div class="window window_check-answer">
-      <app-window-title-bar iconPath="assets/icons/check-question.png"
+      <app-window-title-bar iconPath="check-question.png"
                             title="Check your answer!"></app-window-title-bar>
       <div class="window-body window_check-answer_body">
         <div class="window_check-answer_body_image">
@@ -42,9 +42,9 @@
           <ng-container *ngIf="!this.confirmedAnswer">
             <label class="window_check-answer_body_question_title">Are you sure about that?</label>
             <div class="window_check-answer_body_question_buttons">
-              <app-icon-button iconPath="assets/icons/success.png" title="Yes!"
+              <app-icon-button iconPath="yes.png" title="Yes!"
                                (onButtonClick)="this.confirmAnswer()"></app-icon-button>
-              <app-icon-button iconPath="assets/icons/critical.png" title="No..."
+              <app-icon-button iconPath="no.png" title="No..."
                                (onButtonClick)="this.validateAnswer()"></app-icon-button>
             </div>
           </ng-container>

src/app/score-window/score-window.component.html

@@ -1,11 +1,11 @@
 <div class="window">
-  <app-window-title-bar iconPath="assets/icons/score.png" title="Score"></app-window-title-bar>
+  <app-window-title-bar iconPath="score.png" title="Score"></app-window-title-bar>
   <div class="window-body">
     <div class="window-body_title">
       <label>You currently have &nbsp;<b>[{{this.score}}]</b>&nbsp; points!</label>
     </div>
 
-    <app-icon-button iconPath="assets/icons/home.png" title="Return to home"
+    <app-icon-button iconPath="home.png" title="Return to home"
                      (onButtonClick)="this.returnHome()"></app-icon-button>
   </div>
 </div>

src/app/wrong-answer-window/wrong-answer-window.component.html

@@ -1,12 +1,12 @@
 <div class="window">
-  <app-window-title-bar iconPath="assets/icons/critical.png" title="Oh no!"></app-window-title-bar>
+  <app-window-title-bar iconPath="critical.png" title="Oh no!"></app-window-title-bar>
   <div class="window-body">
     <div class="window-body_title">
       <label>That was not the right answer! The answer was &nbsp;<b>[{{this.correctAnswer}}]</b></label>
       <label>Come back in 3 hours for another question!</label>
     </div>
 
-    <app-icon-button iconPath="assets/icons/home.png" title="Return to home"
+    <app-icon-button iconPath="home.png" title="Return to home"
                      (onButtonClick)="this.returnHome()"></app-icon-button>
   </div>
 </div>