Replace material icons (#15926)

* Replace material icons with FA icons * Fix lint errors * Fix lint errors * Fix lint errors * Remove material icons checkpoint * Fix lint errors * Replace material icons * Replace material icons * Resolve merge conflicts * Fix FA icons * Fix e2e tests * Fix e2e tests * Fix e2e tests * Fix e2e tests
oppia · Aug 28, 2022 · dfd35dc · dfd35dc
1 parent cacab2d
commit dfd35dc
Show file tree

Hide file tree

Showing 59 changed files with 402 additions and 167 deletions.
diff --git a/core/templates/components/button-directives/hint-and-solution-buttons.component.html b/core/templates/components/button-directives/hint-and-solution-buttons.component.html
@@ -6,20 +6,20 @@
               *ngIf="hintIndex === 0 && isHintButtonVisible(hintIndex)"
               [ngClass]="{'viewed': isHintConsumed(hintIndex)}"
               (click)="displayHintModal(hintIndex)">
-        <i class="material-icons">&#xE90F;</i>
+        <i class="fas fa-lightbulb"></i>
       </button>
       <button class="oppia-learner-hint-solution-button md-button md-default-theme e2e-test-view-hint"
               *ngIf="hintIndex && isHintButtonVisible(hintIndex)"
               [ngClass]="{'viewed': isHintConsumed(hintIndex)}"
               (click)="displayHintModal(hintIndex)">
-        <i class="material-icons">&#xE90F;</i>
+        <i class="fas fa-lightbulb"></i>
       </button>
     </li>
     <li *ngIf="isSolutionButtonVisible()">
       <button class="oppia-learner-hint-solution-button md-button md-default-theme e2e-test-view-solution"
               [ngClass]="{'viewed': isSolutionConsumed()}"
               (click)="onClickSolutionButton()">
-        <i class="material-icons oppia-lightbulb-yellow">&#xE90F;</i>
+        <i class="fas fa-lightbulb oppia-lightbulb-yellow"></i>
       </button>
     </li>
   </ul>

diff --git a/...lates/components/common-layout-directives/common-elements/attribution-guide.component.css b/...lates/components/common-layout-directives/common-elements/attribution-guide.component.css
@@ -73,7 +73,7 @@ attribution-guide .oppia-cc-icon a.oppia-attribution-link:focus {
 
 .oppia-attribution-guide .oppia-open-new-tab-icon {
   color: #000;
-  font-size: 1rem;
+  font-size: 0.85rem;
 }
 
 .oppia-attribution-guide .attribution-mask {

diff --git a/...plates/components/common-layout-directives/common-elements/attribution-guide.component.ts b/...plates/components/common-layout-directives/common-elements/attribution-guide.component.ts
@@ -57,8 +57,8 @@ export class AttributionGuideComponent implements OnInit {
       '<a href=\"https://creativecommons.org/licenses/by-sa/4.0/\" ' +
       'rel=\"noopener\" target=\"_blank\"><span ' +
       'class=\"oppia-attribution-licence-link\">CC BY SA 4.0 license</span>' +
-      '<span class=\"material-icons oppia-open-new-tab-icon\">' +
-      'open_in_new</span></a>');
+      '<span class=\"fas fa-external-link-alt oppia-open-new-tab-icon\">' +
+      '</span></a>');
     this.generateAttibutionIsAllowed = (
       this.attributionService.isGenerateAttributionAllowed());
     if (this.generateAttibutionIsAllowed) {

diff --git a/...emplates/components/common-layout-directives/common-elements/sharing-links.component.html b/...emplates/components/common-layout-directives/common-elements/sharing-links.component.html
@@ -18,7 +18,7 @@
   </div>
   <div *ngIf="shareType === 'exploration'" title="Embed this Exploration" class="fx-main-center fx-cross-center padding-0-2 embed-button-icon">
     <a class="fx-main-center fx-cross-center" (click)="showEmbedExplorationModal()" tabindex="0">
-      <i class="material-icons embed-link share-icons embed-icon" [ngClass]="smallFont ? 'font-small' : 'font-big'">&#xE86F;</i>
+      <i class="fas fa-code embed-link share-icons embed-icon" [ngClass]="smallFont ? 'font-small' : 'font-big'"></i>
       <span class="oppia-icon-accessibility-label">Embed this Exploration</span>
     </a>
   </div>
@@ -56,15 +56,16 @@
   }
 
   .oppia-sharing-links .embed-link.font-big {
-    font-size: 2rem;
-    height: 2rem;
-    width: 2rem;
+    font-size: 1.4rem;
+    height: 1.8rem;
+    padding-top: 0.2rem;
+    width: 1.8rem;
   }
 
   .oppia-sharing-links .embed-link.font-small {
-    font-size: 0.9375rem;
-    height: 1.125rem;
-    width: 1.125rem;
+    font-size: 1.6rem;
+    height: 1.9rem;
+    width: 2.2rem;
   }
 
   .oppia-sharing-links .share-option-img {

diff --git a/...ates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.css b/...ates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.css
@@ -374,8 +374,8 @@ oppia-top-navigation-bar .oppia-launch-icon {
   color: #009688;
   font-size: 22px;
 }
-oppia-top-navigation-bar .oppia-user-avatar-icon {
-  margin-top: -1px;
+.oppia-user-avatar-icon {
+  font-size: 36px;
 }
 oppia-top-navigation-bar .oppia-admin-text {
   right: 4px;

diff --git a/...tes/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html b/...tes/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html
@@ -365,8 +365,7 @@
                  alt="User Avatar">
           </span>
           <span *ngIf="!profilePictureDataUrl">
-            <i class="material-icons md-40 oppia-user-avatar-icon">
-              &#xE853;
+            <i class="fas fa-user-circle oppia-user-avatar-icon">
             </i>
             <span class="oppia-icon-accessibility-label">
               User Avatar

diff --git a/core/templates/components/forms/custom-forms-directives/audio-file-uploader.component.html b/core/templates/components/forms/custom-forms-directives/audio-file-uploader.component.html
@@ -17,7 +17,7 @@
   </div>
 
   <div *ngIf="errorMessage" class="error-message e2e-test-upload-error-message">
-    <i class="material-icons">&#xE002;</i>
+    <i class="fas fa-exclamation-triangle"></i>
     {{errorMessage}}
   </div>
 </div>

diff --git a/core/templates/components/forms/custom-forms-directives/edit-thumbnail-modal.component.html b/core/templates/components/forms/custom-forms-directives/edit-thumbnail-modal.component.html
@@ -50,7 +50,7 @@ <h3>Upload Thumbnail</h3>
         <div @fade class="oppia-thumbnail-container e2e-test-thumbnail-container" *ngIf="uploadedImage"
              [ngStyle]="{'background': previewDescriptionBgColor, 'color': previewDescriptionBgColor ? '#FFFFFF' : '', 'width': aspectRatio === '4:3' ? '248px' : '320px' }">
           <button class="btn btn-secondary oppia-thumbnail-reset-button e2e-thumbnail-reset-button e2e-test-thumbnail-reset-button" (click)="reset()">
-            <i class="material-icons oppia-vcenter">&#xE14C;</i>
+            <i class="fas fa-times oppia-vcenter"></i>
           </button>
           <div>
             <oppia-thumbnail-display *ngIf="uploadedImage"

diff --git a/core/templates/components/forms/custom-forms-directives/image-uploader.component.html b/core/templates/components/forms/custom-forms-directives/image-uploader.component.html
@@ -4,7 +4,7 @@
   <div class="image-uploader-text" *ngIf="!isBlogPostThumbnailUploader">{{ 'I18N_DIRECTIVES_DRAG_IMAGE_HERE' | translate }}</div>
   <span *ngIf="errorMessage"
         class="image-uploader-error-message e2e-test-upload-error">
-    <i class="material-icons">&#xE002;</i>
+    <i class="fas fa-exclamation-triangle"></i>
     {{ errorMessage }}
   </span>
   <span class="image-uploader-license-warning" *ngIf="!isBlogPostThumbnailUploader">
@@ -22,10 +22,9 @@
          class="blog-post-thumbnail-uploader d-flex flex-column flex-grow-1 text-center justify-content-center position-relative"
          [ngClass]="{'blog-post-narrow-thumbnail-uploader': isWindowNarrow, 'image-uploader-is-narrow': blogDashboardPageService.imageUploaderIsNarrow, 'uploader-with-error-message': errorMessage}"
          for="image-file-input">
-    <mat-icon class="mx-auto"
-              [ngClass]="{'d-none': blogDashboardPageService.imageUploaderIsNarrow}">
-      insert_photo
-    </mat-icon>
+    <i class="fas fa-image image-uploader-no-thumbnail-icon"
+       [ngClass]="{'d-none': blogDashboardPageService.imageUploaderIsNarrow}">
+    </i>
     <span class="font-weight-light">{{ 'I18N_BLOG_POST_THUMBNAIL_PICTURE_DRAG' | translate }}</span>
   </label>
 </div>
@@ -146,6 +145,10 @@
     height: 135px
   }
 
+  .image-uploader-no-thumbnail-icon {
+    font-size: 30px;
+  }
+
   @media(max-width:768px) {
     .blog-post-thumbnail-uploader {
       height: 80px;

diff --git a/core/templates/components/forms/custom-forms-directives/thumbnail-uploader.component.html b/core/templates/components/forms/custom-forms-directives/thumbnail-uploader.component.html
@@ -6,8 +6,7 @@
            (click)="showEditThumbnailModal()"
            aria-label="upload or edit thumbnail">
       </div>
-      <i class="material-icons oppia-editor-edit-icon oppia-pencil-icon">
-        &#xE254;
+      <i class="fas fa-pen oppia-editor-edit-icon oppia-pencil-icon">
       </i>
       <img [hidden]="!hidePlaceholder" [src]="placeholderImageUrl" align="center" class="oppia-thumbnail-placeholder" alt="">
       <oppia-thumbnail-display *ngIf="editableThumbnailDataUrl"

diff --git a/core/templates/components/forms/schema-based-editors/schema-based-list-editor.component.html b/core/templates/components/forms/schema-based-editors/schema-based-list-editor.component.html
@@ -37,7 +37,7 @@
           <button class="oppia-delete-list-entry-button oppia-transition-200 e2e-test-delete-list-entry" type="button"
                   (click)="deleteElement(idx)"
                   [disabled]="disabled">
-            <i class="material-icons md-18">&#xE5CD;</i>
+            <i class="fas fa-times"></i>
             <span class="oppia-icon-accessibility-label">Delete this list entry</span>
           </button>
         </div>

diff --git a/...ion-directives/question-misconception-editor/question-misconception-editor.component.html b/...ion-directives/question-misconception-editor/question-misconception-editor.component.html
@@ -6,8 +6,8 @@
     <div class="oppia-transition-200">
       <div class="oppia-click-to-start-editing e2e-test-open-misconception-editor"
            *ngIf="isEditable" (click)="editMisconception()">
-        <i *ngIf="isEditable" class="material-icons oppia-editor-edit-icon float-right"
-           title="Edit Misconception">&#xE254;
+        <i *ngIf="isEditable" class="fas fa-pen oppia-editor-edit-icon float-right"
+           title="Edit Misconception">
         </i>
       </div>
       <strong>Tagged Misconception:</strong>

diff --git a/core/templates/components/question-directives/questions-list/questions-list.component.html b/core/templates/components/question-directives/questions-list/questions-list.component.html
@@ -70,7 +70,7 @@ <h3>Question List</h3>
               <span *ngIf="!showUnaddressedSkillMisconceptionWarning(questionSummaryForOneSkill.getQuestionSummary().getMisconceptionIds())">⚠️</span>
               <span (click)="deleteQuestionFromSkill(questionSummaryForOneSkill.getQuestionSummary().getQuestionId(), questionSummaryForOneSkill.getSkillDescription());$event.stopPropagation();"
                     class="link-off-icon">
-                <i class="material-icons">link_off</i>
+                <i class="fas fa-unlink"></i>
               </span>
             </div>
             <div class="question-interaction-id">
@@ -80,11 +80,11 @@ <h3>Question List</h3>
         </div>
       </div>
       <div class="page-navigation-arrows" *ngIf="questionSummariesForOneSkill.length > 0">
-        <i class="material-icons md-18"
+        <i class="fas fa-arrow-left md-18"
            *ngIf="getCurrentPageNumber() !== 0"
-           (click)="goToPreviousPage()">&#xE5C4;
+           (click)="goToPreviousPage()">
         </i> Page {{getCurrentPageNumber() + 1}}
-        <i class="material-icons md-18" *ngIf="!isLastPage()" (click)="goToNextPage()">&#xE5C8;</i>
+        <i class="fas fa-arrow-right md-18" *ngIf="!isLastPage()" (click)="goToNextPage()"></i>
       </div>
     </div>
   </mat-card>

diff --git a/core/templates/components/rubrics-editor/rubrics-editor.component.html b/core/templates/components/rubrics-editor/rubrics-editor.component.html
@@ -23,8 +23,8 @@
           <div class="oppia-rule-preview">
             <div class="oppia-click-to-start-editing" (click)="this.openExplanationEditor(this.rubric.getDifficulty(), idx)">
               <i *ngIf="this.isEditable()"
-                 class="material-icons oppia-editor-edit-icon float-right e2e-test-edit-rubric-explanation-{{this.rubric.getDifficulty()}}"
-                 title="Edit Rubric Explanation">&#xE254;
+                 class="fas fa-pen oppia-editor-edit-icon float-right e2e-test-edit-rubric-explanation-{{this.rubric.getDifficulty()}}"
+                 title="Edit Rubric Explanation">
               </i>
             </div>
             <span *ngIf="this.isExplanationEmpty(explanation) && this.selectedRubricIndex === 1 && idx === 0 && this.newSkillBeingCreated()"

diff --git a/...plates/components/state-directives/answer-group-editor/summary-list-header.component.html b/...plates/components/state-directives/answer-group-editor/summary-list-header.component.html
@@ -55,5 +55,5 @@
 <span class="oppia-delete-example-button e2e-test-delete-example-button oppia-transition-200"
       *ngIf="isDeleteAvailable"
       (click)="deleteItem($event)">
-  <i class="material-icons md-18">&#xE5CD;</i>
+  <i class="fas fa-times"></i>
 </span>
diff --git a/core/templates/components/state-directives/hint-editor/hint-editor.component.html b/core/templates/components/state-directives/hint-editor/hint-editor.component.html
@@ -8,8 +8,8 @@
         <div class="oppia-click-to-start-editing e2e-test-open-hint-editor"
              *ngIf="isEditable" (click)="openHintEditor()">
           <i *ngIf="isEditable"
-             class="material-icons oppia-editor-edit-icon float-right"
-             title="Edit Hint">&#xE254;
+             class="fas fa-pen oppia-editor-edit-icon float-right"
+             title="Edit Hint">
           </i>
         </div>
 

diff --git a/core/templates/components/state-directives/outcome-editor/outcome-editor.component.html b/core/templates/components/state-directives/outcome-editor/outcome-editor.component.html
@@ -54,9 +54,9 @@
 
       <!-- Desktop -->
       <div class="oppia-click-to-start-editing e2e-test-open-outcome-feedback-editor"
-           *ngIf="!onMobile && isEditable" (click)="openFeedbackEditor()">
-        <i *ngIf="isEditable" class="material-icons oppia-editor-edit-icon float-right"
-           title="Edit Feedback">&#xE254;
+           *ngIf="isEditable" (click)="openFeedbackEditor()">
+        <i *ngIf="isEditable" class="fas fa-pen oppia-editor-edit-icon float-right"
+           title="Edit Feedback">
         </i>
       </div>
 
@@ -124,8 +124,8 @@
     <div class="oppia-rule-preview oppia-transition-200">
       <div class="oppia-click-to-start-editing e2e-test-open-outcome-dest-editor"
            *ngIf="isEditable" (click)="openDestinationEditor()">
-        <i *ngIf="isEditable" class="material-icons oppia-editor-edit-icon float-right"
-           title="Edit Destination">&#xE254;
+        <i *ngIf="isEditable" class="fas fa-pen oppia-editor-edit-icon float-right"
+           title="Edit Destination">
         </i>
       </div>
 

diff --git a/core/templates/components/state-directives/response-header/response-header.component.html b/core/templates/components/state-directives/response-header/response-header.component.html
@@ -2,8 +2,8 @@
   <div class="oppia-response-header">
     <span *ngIf="showWarning">⚠</span>
     <div class="oppia-response-container-desktop">
-      <i class="material-icons md-18 oppia-response-tick-cross oppia-response-cross" *ngIf="!isCorrect() && isCorrectnessFeedbackEnabled() && isResponse && !isCurrentInteractionLinear()">&#x2718;</i>
-      <i class="material-icons md-18 oppia-response-tick-cross  oppia-response-tick e2e-test-correct-tick-mark" *ngIf="isCorrect() && isCorrectnessFeedbackEnabled() && isResponse && !isCurrentInteractionLinear()">&#10004;</i>
+      <i class="fas fa-times oppia-response-tick-cross oppia-response-cross" *ngIf="!isCorrect() && isCorrectnessFeedbackEnabled() && isResponse && !isCurrentInteractionLinear()"></i>
+      <i class="fas fa-check oppia-response-tick-cross  oppia-response-tick e2e-test-correct-tick-mark" *ngIf="isCorrect() && isCorrectnessFeedbackEnabled() && isResponse && !isCurrentInteractionLinear()"></i>
     </div>
     <div class="oppia-responses-mobile">
       <div class="oppia-response-mobile-item oppia-response-mobile-item-incorrect" *ngIf="!isCorrect() && isCorrectnessFeedbackEnabled() && isResponse && !isCurrentInteractionLinear()">
@@ -75,6 +75,7 @@
   }
   .oppia-response-tick {
     color: #00645c;
+    font-size: 14px;
   }
   .oppia-response-summary {
     display: flex;

diff --git a/...emplates/components/state-editor/state-content-editor/state-content-editor.component.html b/...emplates/components/state-editor/state-content-editor/state-content-editor.component.html
@@ -19,8 +19,8 @@
   <div *ngIf="isContentEditable()"
        class="e2e-test-edit-content oppia-editable-section e2e-test-edit-content-pencil-button"
        (click)="openStateContentEditor()">
-    <i class="material-icons oppia-editor-edit-icon"
-       title="Edit Card Content">&#xE254;
+    <i class="fas fa-pen oppia-editor-edit-icon oppia-editor-edit-icon-position e2e-test-edit-content-pencil-button"
+       title="Edit Card Content">
     </i>
     <div class="oppia-prevent-selection oppia-state-content-display oppia-transition-200"
          title="Card Content">
@@ -105,7 +105,7 @@
     position: fixed;
     top: -30000px;
   }
-  .oppia-editor-edit-icon {
-    right: -3px;
+  .oppia-editor-edit-icon-position {
+    top: 9px;
   }
 </style>
diff --git a/core/templates/components/state-editor/state-responses-editor/state-responses.component.html b/core/templates/components/state-editor/state-responses-editor/state-responses.component.html
@@ -26,8 +26,8 @@ <h3 class="oppia-exp-answer-card-header">Learner's Answers and Oppia's Responses
                  [ngClass]="{'active': activeAnswerGroupIndex === index}"
                  class="oppia-sortable-rule-block oppia-prevent-selection">
 
-              <span class="oppia-rule-sort-handle" *ngIf="answerGroups.length > 1" (mousedown)="changeActiveAnswerGroupIndex(-1)">
-                <span *ngIf="editabilityService.isEditable()" class="material-icons draggable-icon-indicator">drag_indicator</span>
+              <span class="oppia-rule-sort-handle" *ngIf="answerGroups?.length > 1" (mousedown)="changeActiveAnswerGroupIndex(-1)">
+                <span *ngIf="editabilityService.isEditable()" class="fas fa-grip-vertical draggable-icon-indicator"></span>
               </span>
 
               <div class="oppia-rule-header-warning-placement" *ngIf="isSelfLoopThatIsMarkedCorrect(answerGroup.outcome) || isSelfLoopWithNoFeedback(answerGroup.outcome)" (click)="changeActiveAnswerGroupIndex(index)"

diff --git a/core/templates/css/oppia.css b/core/templates/css/oppia.css
@@ -1420,14 +1420,22 @@ span.sort-explorations-select .sort-order {
   }
 }
 
-.oppia-save-publish-loading.oppia-save-publish-button-icon {
+.oppia-save-publish-loading {
   font-size: 30px;
   font-style: normal;
   letter-spacing: -4px;
   line-height: 14px;
   text-align: center;
 }
 
+.oppia-save-publish-button-icon {
+  font-size: 16px;
+  font-style: normal;
+  letter-spacing: 2px;
+  line-height: 19px;
+  text-align: center;
+}
+
 @media(max-width: 1099px) {
   .oppia-save-publish-button-label {
     display: none;
@@ -1822,7 +1830,7 @@ pre.oppia-pre-wrapped-text {
 }
 
 .oppia-editor-edit-icon {
-  font-size: 16px;
+  font-size: 12px;
   opacity: 0.2;
   position: absolute;
   right: -22px;
@@ -2451,6 +2459,7 @@ div#ng-curtain {
 
 .oppia-navbar-back-button {
   color: white;
+  font-size: 20px;
   padding: 6px;
 }
 

diff --git a/core/templates/pages/blog-dashboard-page/blog-dashboard-page.component.html b/core/templates/pages/blog-dashboard-page/blog-dashboard-page.component.html
@@ -40,10 +40,10 @@
           </ng-template>
           <div class="justify-content-end d-flex" *ngIf="!windowIsNarrow">
             <button mat-icon-button (click)="activeView = 'gridView'" class="e2e-test-tiles-view-button">
-              <mat-icon [ngClass]="{'view-active': activeView === 'gridView'}">grid_view</mat-icon>
+              <i [ngClass]="{'view-active': activeView === 'gridView'}" class="fas fa-border-all blog-dashboard-grid-list-icon"></i>
             </button>
             <button mat-icon-button (click)="activeView = 'listView'" class="e2e-test-list-view-button">
-              <mat-icon [ngClass]="{'view-active': activeView === 'listView'}">view_list</mat-icon>
+              <i [ngClass]="{'view-active': activeView === 'listView'}" class="fas fa-list blog-dashboard-grid-list-icon"></i>
             </button>
           </div>
           <div class="blog-dashboard-tiles-container e2e-test-drafts-blog-post-table" *ngIf="activeView === 'gridView'">
@@ -72,10 +72,10 @@
           </ng-template>
           <div class="justify-content-end d-flex" *ngIf="!windowIsNarrow">
             <button mat-icon-button (click)="activeView = 'gridView'" class="e2e-test-tiles-view-button">
-              <mat-icon [ngClass]="{'view-active': activeView === 'gridView'}">grid_view</mat-icon>
+              <i [ngClass]="{'view-active': activeView === 'gridView'}" class="fas fa-border-all blog-dashboard-grid-list-icon"></i>
             </button>
             <button mat-icon-button (click)="activeView = 'listView'" class="e2e-test-list-view-button">
-              <mat-icon [ngClass]="{'view-active': activeView === 'listView'}">view_list</mat-icon>
+              <i [ngClass]="{'view-active': activeView === 'listView'}" class="fas fa-list blog-dashboard-grid-list-icon"></i>
             </button>
           </div>
           <div class="blog-dashboard-tiles-container e2e-test-published-blog-post-table" *ngIf="activeView === 'gridView'">
@@ -216,6 +216,10 @@
     cursor: pointer;
   }
 
+  .blog-dashboard-grid-list-icon {
+    font-size: 20px;
+  }
+
   :host /deep/ .mat-tab-label {
     font-family: 'Roboto', Arial, sans-serif;
     font-size: 1.6rem;