diff --git a/src/addons/qtype/calculated/component/addon-qtype-calculated.html b/src/addons/qtype/calculated/component/addon-qtype-calculated.html
index 06421260d..1b2d55d30 100644
--- a/src/addons/qtype/calculated/component/addon-qtype-calculated.html
+++ b/src/addons/qtype/calculated/component/addon-qtype-calculated.html
@@ -15,24 +15,24 @@
     <ion-item *ngIf="calcQuestion.input" class="ion-text-wrap core-{{calcQuestion.input.correctIconColor}}-item">
         <ion-label position="stacked">{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
 
-        <!-- Display unit select before the answer input. -->
-        <ng-container *ngIf="calcQuestion.select && calcQuestion.selectFirst">
-            <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
-        </ng-container>
+        <div class="flex-row">
+            <!-- Display unit select before the answer input. -->
+            <ng-container *ngIf="calcQuestion.select && calcQuestion.selectFirst">
+                <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
+            </ng-container>
 
-        <!-- Input to enter the answer. -->
+            <!-- Input to enter the answer. -->
             <ion-input type="text" [attr.name]="calcQuestion.input.name"
                 [placeholder]="calcQuestion.input.readOnly ? '' : 'core.question.answer' | translate"
-                [value]="calcQuestion.input.value" [disabled]="calcQuestion.input.readOnly" autocorrect="off"
-                [slot]="calcQuestion.select && calcQuestion.selectFirst ? 'end' : 'start'">
+                [value]="calcQuestion.input.value" [disabled]="calcQuestion.input.readOnly" autocorrect="off">
             </ion-input>
 
-        <!-- Display unit select after the answer input. -->
-        <ng-container *ngIf="calcQuestion.select && !calcQuestion.selectFirst">
-            <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
-        </ng-container>
-
-        <ion-icon *ngIf="calcQuestion.input.correctIcon" class="core-correct-icon" slot="end"
+            <!-- Display unit select after the answer input. -->
+            <ng-container *ngIf="calcQuestion.select && !calcQuestion.selectFirst">
+                <ng-container *ngTemplateOutlet="selectUnits"></ng-container>
+            </ng-container>
+        </div>
+        <ion-icon *ngIf="calcQuestion.input.correctIcon" class="core-correct-icon ion-align-self-center" slot="end"
             [name]="calcQuestion.input.correctIcon" [color]="[calcQuestion.input.correctIconColor]">
         </ion-icon>
     </ion-item>
@@ -45,18 +45,16 @@
 
 <!-- Template for units entered using a select. -->
 <ng-template #selectUnits>
-    <!-- <ion-col> -->
-        <label *ngIf="calcQuestion!.select!.accessibilityLabel" class="accesshide" for="{{calcQuestion!.select!.id}}">
-            {{ calcQuestion!.select!.accessibilityLabel }}
-        </label>
-        <ion-select id="{{calcQuestion!.select!.id}}" [name]="calcQuestion!.select!.name"
-            [(ngModel)]="calcQuestion!.select!.selected" interface="action-sheet" [disabled]="calcQuestion!.select!.disabled"
-            [slot]="calcQuestion?.selectFirst ? 'start' : 'end'">
-            <ion-select-option *ngFor="let option of calcQuestion!.select!.options" [value]="option.value">
-                {{option.label}}
-            </ion-select-option>
-        </ion-select>
-    <!-- </ion-col> -->
+    <label *ngIf="calcQuestion!.select!.accessibilityLabel" class="accesshide" for="{{calcQuestion!.select!.id}}">
+        {{ calcQuestion!.select!.accessibilityLabel }}
+    </label>
+    <ion-select id="{{calcQuestion!.select!.id}}" [name]="calcQuestion!.select!.name"
+        [(ngModel)]="calcQuestion!.select!.selected" interface="action-sheet" [disabled]="calcQuestion!.select!.disabled"
+        [slot]="calcQuestion?.selectFirst ? 'start' : 'end'">
+        <ion-select-option *ngFor="let option of calcQuestion!.select!.options" [value]="option.value">
+            {{option.label}}
+        </ion-select-option>
+    </ion-select>
 </ng-template>
 
 <!-- Template for units entered using radio buttons. -->
diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html
index af831e867..43d2ba8e1 100644
--- a/src/core/components/local-file/core-local-file.html
+++ b/src/core/components/local-file/core-local-file.html
@@ -1,6 +1,8 @@
 <form (ngSubmit)="changeName(newFileName, $event)" #nameForm>
-    <ion-item class="ion-text-wrap item-media" (click)="fileClicked($event)"> <!-- [class.item-input]="editMode" -->
-        <img [src]="fileIcon" alt="{{fileExtension}}" role="presentation" slot="start" />
+    <ion-item class="ion-text-wrap item-file" (click)="fileClicked($event)"> <!-- [class.item-input]="editMode" -->
+        <ion-thumbnail slot="start">
+            <img [src]="fileIcon" alt="{{fileExtension}}" role="presentation" />
+        </ion-thumbnail>
 
         <ion-label>
             <!-- File name and edit button (if editable). -->
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
index 5f641ead3..11299d9de 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
@@ -1,3 +1,20 @@
+@import "~theme/globals";
+:host {
+    --placeholder-color: var(--gray-light);
+    --toobar-background: var(--white);
+    --button-color: var(--ion-text-color);
+    --button-active-color: var(--gray);
+}
+
+:host-context(body.dark) {
+    --background: var(--gray-darker);
+    --color: var(--white);
+    --button-color: var(--gray-light);
+    --button-active-color: var(--gray-dark);
+    --placeholder-color: var(--gray);
+    --toobar-background: var(--black);
+}
+
 :host {
     height: 40vh;
     overflow: hidden;
@@ -6,9 +23,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    // @include darkmode() {
-    //     background-color: $gray-darker;
-    // }
+    background: var(--background);
 
     .core-rte-editor-container {
         max-height: calc(100% - 46px);
@@ -22,7 +37,7 @@
         .core-rte-info-message {
             padding: 5px;
             border-top: 1px solid var(--ion-color-secondary);
-            background: white;
+            background: var(--background);
             flex-shrink: 1;
             font-size: 1.4rem;
 
@@ -37,36 +52,30 @@
         margin: 2px;
         width: 100%;
         resize: none;
-        background-color: white;
+        background-color: var(--background);
+        color: var(--color);
         flex-grow: 1;
-        // @include darkmode() {
-        //     background-color: var(--gray-darker);
-        //     color: var(--white);
-        // }
     }
 
     .core-rte-editor {
         flex-grow: 1;
         flex-shrink: 1;
         -webkit-user-select: auto !important;
+        user-select: auto !important;
         word-wrap: break-word;
         overflow-x: hidden;
         overflow-y: auto;
         cursor: text;
         img {
-            // @include padding(null, null, null, 2px);
+            @include padding(null, null, null, 2px);
             max-width: 95%;
             width: auto;
         }
         &:empty:before {
             content: attr(data-placeholder-text);
             display: block;
-            color: var(--gray-light);
+            color: var(--placeholder-color);
             font-weight: bold;
-
-            // @include darkmode() {
-            //     color: $gray;
-            // }
         }
 
         // Make empty elements selectable (to move the cursor).
@@ -80,19 +89,15 @@
         flex-shrink: 1;
         position: relative;
 
-        textarea {
+        ::ng-deep textarea {
             margin: 0 !important;
             padding: 0;
-            height: 100% !important;
-            width: 100% !important;
             resize: none;
             overflow-x: hidden;
             overflow-y: auto;
             position: absolute;
             top: 0;
             bottom: 0;
-            left: 0;
-            right: 0;
         }
     }
 
@@ -102,12 +107,8 @@
         z-index: 1;
         flex-grow: 0;
         flex-shrink: 0;
-        background-color: var(--white);
-
-        // @include darkmode() {
-        //     background-color: $black;
-        // }
-        // @include padding(5px, null);
+        background-color: var(--toobar-background);
+        padding-top: 5px;
         border-top: 1px solid var(--gray);
 
         ion-slides {
@@ -126,26 +127,18 @@
             padding-left: 6px;
             margin: 0 auto;
             font-size: 18px;
-            background-color: var(--white);
+            background-color: var(--toobar-background);
             border-radius: 4px;
-            // @include core-transition(background-color, 200ms);
-            color: var(--ion-text-color);
+            @include core-transition(background-color, 200ms);
+            color: var(--button-color);
             cursor: pointer;
 
-            // @include darkmode() {
-            //     background-color: $black;
-            //     color: $core-dark-text-color;
-            // }
-
             &.toolbar-button-enable {
                 width: 100%;
             }
 
             &:active, &[aria-pressed="true"] {
-                background-color: var(--gray);
-                // @include darkmode() {
-                //     background-color: $gray-dark;
-                // }
+                background-color: var(--button-active-color);
             }
 
             &.toolbar-arrow {
@@ -153,13 +146,10 @@
                 flex-grow: 0;
                 flex-shrink: 0;
                 opacity: 1;
-                // @include core-transition(opacity, 200ms);
+                @include core-transition(opacity, 200ms);
 
                 &:active {
-                    background-color: var(--white);
-                    // @include darkmode() {
-                    //     background-color: $black;
-                    // }
+                    background-color: var(--toobar-background);
                 }
 
                 &.toolbar-arrow-hidden {
@@ -178,4 +168,4 @@
 
 :host-context(.keyboard-is-open) {
     min-height: 200px;
-}
\ No newline at end of file
+}
diff --git a/src/core/features/question/services/question-helper.ts b/src/core/features/question/services/question-helper.ts
index 0ff86daa6..3b64881e0 100644
--- a/src/core/features/question/services/question-helper.ts
+++ b/src/core/features/question/services/question-helper.ts
@@ -769,22 +769,36 @@ export class CoreQuestionHelperProvider {
      * @param element DOM element.
      */
     treatCorrectnessIcons(element: HTMLElement): void {
-        const icons = <HTMLImageElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon'));
+        const icons = <HTMLElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon, i.icon'));
         icons.forEach((icon) => {
-            // Replace the icon with the font version.
-            if (!icon.src) {
-                return;
+            let correct = false;
+
+            if ('src' in icon) {
+                if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) {
+                    correct = true;
+                } else if ((icon as HTMLImageElement).src.indexOf('incorrect') < 0 ) {
+                    return;
+                }
+            } else {
+                const classList = icon.classList.toString();
+                if (classList.indexOf('fa-check') >= 0) {
+                    correct = true;
+                } else if (classList.indexOf('fa-remove') < 0) {
+                    return;
+                }
             }
 
-            // @todo: Check the right classes to use.
-            const newIcon: HTMLElement = document.createElement('i');
+            // Replace the icon with the font version.
+            const newIcon: HTMLElement = document.createElement('ion-icon');
 
-            if (icon.src.indexOf('incorrect') > -1) {
-                newIcon.className = 'icon fa fa-remove text-danger fa-fw questioncorrectnessicon';
-            } else if (icon.src.indexOf('correct') > -1) {
-                newIcon.className = 'icon fa fa-check text-success fa-fw questioncorrectnessicon';
+            if (correct) {
+                newIcon.setAttribute('name', 'fas-check');
+                newIcon.setAttribute('src', 'assets/fonts/font-awesome/solid/check.svg');
+                newIcon.className = 'core-correct-icon ion-color ion-color-success questioncorrectnessicon';
             } else {
-                return;
+                newIcon.setAttribute('name', 'fas-times');
+                newIcon.setAttribute('src', 'assets/fonts/font-awesome/solid/times.svg');
+                newIcon.className = 'core-correct-icon ion-color ion-color-danger questioncorrectnessicon';
             }
 
             newIcon.title = icon.title;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 9d668a0fc..a8c693a6f 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -28,6 +28,11 @@
     text-transform: none;
 }
 
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
 // Correctly inherit ion-text-wrap onto labels.
 ion-item.ion-text-wrap ion-label {
     white-space: normal !important;