Color-Themes-System, fixes #5361

Closes #5361

Merge request studip/studip!4038

30 files changed, 91 insertions, 89 deletions

diff --git a/app/views/vips/exam_mode/index.php b/app/views/vips/exam_mode/index.php
index 50bf0a6..b5aba7f 100644
--- a/app/views/vips/exam_mode/index.php
+++ b/app/views/vips/exam_mode/index.php
@@ -32,7 +32,7 @@
                         </td>
                         <td>
                             <a href="<?= URLHelper::getLink($nav->getURL(), ['cid' => $course_id]) ?>">
-                                <?= $nav->getImage()->asImg($nav->getLinkAttributes()) ?>
+                                <?= $nav->getImage()->asSvg($nav->getLinkAttributes()) ?>
                             </a>
                         </td>
                     </tr>
diff --git a/app/views/vips/exercises/ClozeTask/correct.php b/app/views/vips/exercises/ClozeTask/correct.php
index 8e4aac1..867a644 100644
--- a/app/views/vips/exercises/ClozeTask/correct.php
+++ b/app/views/vips/exercises/ClozeTask/correct.php
@@ -15,19 +15,19 @@
             <? if ($solution->id): ?>
                 <? if ($results[$blank]['points'] == 1): ?>
                  --><span class="correct_item math-tex"><?= htmlReady($response[$blank]) ?><!--
-                     --><?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_inline', 'title' => _('richtig')]) ?><!--
+                     --><?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_inline', 'title' => _('richtig')]) ?><!--
                  --></span><!--
                 <? elseif ($results[$blank]['points'] == 0.5): ?>
                  --><span class="fuzzy_item math-tex"><?= htmlReady($response[$blank]) ?><!--
-                     --><?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asImg(['class' => 'correction_inline', 'title' => _('fast richtig')]) ?><!--
+                     --><?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asSvg(['class' => 'correction_inline', 'title' => _('fast richtig')]) ?><!--
                  --></span><!--
                 <? elseif (empty($edit_solution) || $results[$blank]['safe']): ?>
                  --><span class="wrong_item math-tex"><?= htmlReady($response[$blank]) ?><!--
-                     --><?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_inline', 'title' => _('falsch')]) ?><!--
+                     --><?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_inline', 'title' => _('falsch')]) ?><!--
                  --></span><!--
                 <? else: ?>
                  --><span class="wrong_item math-tex"><?= htmlReady($response[$blank]) ?><!--
-                     --><?= Icon::create('question', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_inline', 'title' => _('unbekannte Antwort')]) ?><!--
+                     --><?= Icon::create('question', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_inline', 'title' => _('Unbekannte Antwort')]) ?><!--
                  --></span><!--
                 <? endif ?>
             <? endif ?>
diff --git a/app/views/vips/exercises/ClozeTask/print.php b/app/views/vips/exercises/ClozeTask/print.php
index fce4bc4..4be1f4a 100644
--- a/app/views/vips/exercises/ClozeTask/print.php
+++ b/app/views/vips/exercises/ClozeTask/print.php
@@ -17,11 +17,11 @@
              --><span class="math-tex" style="text-decoration: underline;">&nbsp;&nbsp;<?= htmlReady($response[$blank]) ?>&nbsp;&nbsp;</span><!--
                 <? if ($print_correction): ?>
                     <? if ($results[$blank]['points'] == 1): ?>
-                     --><?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('richtig')]) ?><!--
+                     --><?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('richtig')]) ?><!--
                     <? elseif ($results[$blank]['points'] == 0.5): ?>
-                     --><?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asImg(['title' => _('fast richtig')]) ?><!--
+                     --><?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asSvg(['title' => _('fast richtig')]) ?><!--
                     <? else: ?>
-                     --><?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('falsch')]) ?><!--
+                     --><?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('falsch')]) ?><!--
                     <? endif ?>
                 <? endif ?>
             <? elseif ($exercise->isSelect($blank)): ?>
diff --git a/app/views/vips/exercises/MatchingTask/correct.php b/app/views/vips/exercises/MatchingTask/correct.php
index 64faca6..d38afb6 100644
--- a/app/views/vips/exercises/MatchingTask/correct.php
+++ b/app/views/vips/exercises/MatchingTask/correct.php
@@ -44,9 +44,9 @@
                                 <?= formatReady($answer['text']) ?>
 
                                 <? if ($exercise->isCorrectAnswer($answer, $i)): ?>
-                                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                                 <? else: ?>
-                                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                                 <? endif ?>
                             </div>
                         <? endif ?>
@@ -78,9 +78,9 @@
 
             <? if ($solution->id): ?>
                 <? if ($exercise->isCorrectAnswer($answer, -1)): ?>
-                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_inline', 'title' => _('richtig')]) ?>
+                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_inline', 'title' => _('richtig')]) ?>
                 <? else: ?>
-                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_inline', 'title' => _('falsch')]) ?>
+                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_inline', 'title' => _('falsch')]) ?>
                 <? endif ?>
             <? endif ?>
         </div>
diff --git a/app/views/vips/exercises/MatchingTask/print.php b/app/views/vips/exercises/MatchingTask/print.php
index a9617df..123c9a6 100644
--- a/app/views/vips/exercises/MatchingTask/print.php
+++ b/app/views/vips/exercises/MatchingTask/print.php
@@ -44,9 +44,9 @@
 
                                 <? if ($print_correction): ?>
                                     <? if ($exercise->isCorrectAnswer($answer, $i)) : ?>
-                                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                                     <? else : ?>
-                                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                                     <? endif ?>
                                 <? endif ?>
                             </div>
@@ -84,9 +84,9 @@
 
                 <? if ($solution->id && $print_correction): ?>
                     <? if ($exercise->isCorrectAnswer($answer, -1)): ?>
-                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('richtig')]) ?>
+                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('richtig')]) ?>
                     <? else: ?>
-                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('falsch')]) ?>
+                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('falsch')]) ?>
                     <? endif ?>
                 <? endif ?>
             </li>
diff --git a/app/views/vips/exercises/MatrixChoiceTask/correct.php b/app/views/vips/exercises/MatrixChoiceTask/correct.php
index 1b4f8ba..82a87fe 100644
--- a/app/views/vips/exercises/MatrixChoiceTask/correct.php
+++ b/app/views/vips/exercises/MatrixChoiceTask/correct.php
@@ -18,9 +18,9 @@
             <td style="white-space: nowrap;">
                 <? if (isset($response[$key]) && $response[$key] !== '' && $response[$key] != -1): ?>
                     <? if ($response[$key] == $entry['choice']): ?>
-                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                     <? else: ?>
-                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                     <? endif ?>
                 <? endif ?>
 
diff --git a/app/views/vips/exercises/MatrixChoiceTask/print.php b/app/views/vips/exercises/MatrixChoiceTask/print.php
index 314730f..9403d0c 100644
--- a/app/views/vips/exercises/MatrixChoiceTask/print.php
+++ b/app/views/vips/exercises/MatrixChoiceTask/print.php
@@ -17,9 +17,9 @@
             <td style="white-space: nowrap;">
                 <? if (isset($response[$key]) && $response[$key] !== '' && $response[$key] != -1 && $print_correction): ?>
                     <? if ($response[$key] == $entry['choice']): ?>
-                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                     <? else: ?>
-                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                     <? endif ?>
                 <? endif ?>
 
diff --git a/app/views/vips/exercises/MultipleChoiceTask/correct.php b/app/views/vips/exercises/MultipleChoiceTask/correct.php
index 2f2a6dc..59fe5b6 100644
--- a/app/views/vips/exercises/MultipleChoiceTask/correct.php
+++ b/app/views/vips/exercises/MultipleChoiceTask/correct.php
@@ -20,9 +20,9 @@
 
             <? if (isset($response[$key])): ?>
                 <? if ((int) $response[$key] == $entry['score']): ?>
-                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                 <? else: ?>
-                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                 <? endif ?>
             <? endif ?>
         </div>
diff --git a/app/views/vips/exercises/MultipleChoiceTask/print.php b/app/views/vips/exercises/MultipleChoiceTask/print.php
index d352f17..ea2d761 100644
--- a/app/views/vips/exercises/MultipleChoiceTask/print.php
+++ b/app/views/vips/exercises/MultipleChoiceTask/print.php
@@ -18,9 +18,9 @@
 
             <? if (isset($response[$key]) && $print_correction): ?>
                 <? if ((int) $response[$key] == $entry['score']): ?>
-                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                 <? else: ?>
-                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                 <? endif ?>
             <? endif ?>
         </div>
diff --git a/app/views/vips/exercises/SequenceTask/correct.php b/app/views/vips/exercises/SequenceTask/correct.php
index 72cfba5..8093be0 100644
--- a/app/views/vips/exercises/SequenceTask/correct.php
+++ b/app/views/vips/exercises/SequenceTask/correct.php
@@ -37,10 +37,10 @@
                                         <div class="correction_marker sequence">
                                             <? if ($results[$i]['points'] == 1): ?>
                                                 <span style="color: green;">}</span>
-                                                <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('richtig')]) ?>
+                                                <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('richtig')]) ?>
                                             <? else: ?>
                                                 <span style="color: red;">}</span>
-                                                <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('falsch')]) ?>
+                                                <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('falsch')]) ?>
                                             <? endif ?>
                                         </div>
                                     <? endif ?>
@@ -49,9 +49,9 @@
                                         <?= formatReady($answer['text']) ?>
 
                                         <? if ($results[$i]['points'] == 1): ?>
-                                            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                                            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                                         <? else: ?>
-                                            <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                                            <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                                         <? endif ?>
                                     </div>
                                 <? else: ?>
diff --git a/app/views/vips/exercises/SequenceTask/print.php b/app/views/vips/exercises/SequenceTask/print.php
index 1ccb76d..485d4d7 100644
--- a/app/views/vips/exercises/SequenceTask/print.php
+++ b/app/views/vips/exercises/SequenceTask/print.php
@@ -39,10 +39,10 @@
                                             <div class="correction_marker sequence">
                                                 <? if ($results[$i]['points'] == 1): ?>
                                                     <span style="color: green;">}</span>
-                                                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('richtig')]) ?>
+                                                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('richtig')]) ?>
                                                 <? else: ?>
                                                     <span style="color: red;">}</span>
-                                                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('falsch')]) ?>
+                                                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('falsch')]) ?>
                                                 <? endif ?>
                                             </div>
                                         <? endif ?>
@@ -52,9 +52,9 @@
 
                                             <? if ($print_correction): ?>
                                                 <? if ($results[$i]['points'] == 1): ?>
-                                                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                                                    <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                                                 <? else: ?>
-                                                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                                                    <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                                                 <? endif ?>
                                             <? endif ?>
                                         </li>
diff --git a/app/views/vips/exercises/SingleChoiceTask/correct.php b/app/views/vips/exercises/SingleChoiceTask/correct.php
index cecc743..a2796fb 100644
--- a/app/views/vips/exercises/SingleChoiceTask/correct.php
+++ b/app/views/vips/exercises/SingleChoiceTask/correct.php
@@ -28,9 +28,9 @@
 
                 <? if (isset($response[$group]) && $response[$group] === "$key"): ?>
                     <? if ($entry['score'] == 1): ?>
-                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                     <? elseif ($key != -1): ?>
-                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                     <? endif ?>
                 <? endif ?>
             </div>
diff --git a/app/views/vips/exercises/SingleChoiceTask/print.php b/app/views/vips/exercises/SingleChoiceTask/print.php
index a61bc84..5ac9961 100644
--- a/app/views/vips/exercises/SingleChoiceTask/print.php
+++ b/app/views/vips/exercises/SingleChoiceTask/print.php
@@ -27,9 +27,9 @@
                 <? if ($print_correction): ?>
                     <? if (isset($response[$group]) && $response[$group] === "$key"): ?>
                         <? if ($entry['score'] == 1): ?>
-                            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
+                            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['class' => 'correction_marker', 'title' => _('richtig')]) ?>
                         <? elseif ($key != -1): ?>
-                            <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
+                            <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['class' => 'correction_marker', 'title' => _('falsch')]) ?>
                         <? endif ?>
                     <? endif ?>
                 <? endif ?>
diff --git a/app/views/vips/exercises/TextLineTask/correct.php b/app/views/vips/exercises/TextLineTask/correct.php
index 45671d4..3457f2e 100644
--- a/app/views/vips/exercises/TextLineTask/correct.php
+++ b/app/views/vips/exercises/TextLineTask/correct.php
@@ -16,13 +16,13 @@
     <?= htmlReady($response[0]) ?>
 
     <? if ($results[0]['points'] == 1): ?>
-        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('richtig')]) ?>
+        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('richtig')]) ?>
     <? elseif ($results[0]['points'] == 0.5): ?>
-        <?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asImg(['title' => _('fast richtig')]) ?>
+        <?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asSvg(['title' => _('fast richtig')]) ?>
     <? elseif (!$edit_solution || $results[0]['safe']): ?>
-        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('falsch')]) ?>
+        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('falsch')]) ?>
     <? else: ?>
-        <?= Icon::create('question', Icon::ROLE_STATUS_RED)->asImg(['title' => _('unbekannte Antwort')]) ?>
+        <?= Icon::create('question', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('Unbekannte Antwort')]) ?>
     <? endif ?>
 <? endif ?>
 
diff --git a/app/views/vips/exercises/TextLineTask/print.php b/app/views/vips/exercises/TextLineTask/print.php
index 08944d2..ba86963 100644
--- a/app/views/vips/exercises/TextLineTask/print.php
+++ b/app/views/vips/exercises/TextLineTask/print.php
@@ -13,11 +13,11 @@
 
     <? if ($print_correction): ?>
         <? if ($results[0]['points'] == 1): ?>
-            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('richtig')]) ?>
+            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('richtig')]) ?>
         <? elseif ($results[0]['points'] == 0.5): ?>
-            <?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asImg(['title' => _('fast richtig')]) ?>
+            <?= Icon::create('decline', Icon::ROLE_STATUS_YELLOW)->asSvg(['title' => _('fast richtig')]) ?>
         <? else: ?>
-            <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('falsch')]) ?>
+            <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('falsch')]) ?>
         <? endif ?>
     <? endif ?>
 <? else : ?>
diff --git a/app/views/vips/exercises/TextTask/correct.php b/app/views/vips/exercises/TextTask/correct.php
index 69336a4..175de6c 100644
--- a/app/views/vips/exercises/TextTask/correct.php
+++ b/app/views/vips/exercises/TextTask/correct.php
@@ -131,7 +131,7 @@
                 <tr>
                     <td>
                         <a href="<?= htmlReady($file_ref->getDownloadURL()) ?>">
-                            <?= Icon::create('file')->asImg(['title' => _('Datei herunterladen')]) ?>
+                            <?= Icon::create('file')->asSvg(['title' => _('Datei herunterladen')]) ?>
                             <?= htmlReady($file_ref->name) ?>
                         </a>
                     </td>
diff --git a/app/views/vips/exercises/TextTask/solve.php b/app/views/vips/exercises/TextTask/solve.php
index ddafce6..62b2fa0 100644
--- a/app/views/vips/exercises/TextTask/solve.php
+++ b/app/views/vips/exercises/TextTask/solve.php
@@ -36,7 +36,7 @@
                     <a hidden download="<?= htmlReady($exercise->title) ?>.txt" target="_blank"></a>
                     <?= Studip\Button::create(_('Antwort herunterladen'), 'download', ['class' => 'vips_file_download']) ?>
                     <input hidden class="file_upload inline" type="file">
-                    <?= Studip\Button::create(_('Text in das Eingabefeld hochladen'), 'upload', ['class' => 'vips_file_upload']) ?>
+                    <?= Studip\Button::create(_('Text in das Eingabefeld hochladen'), 'upload', ['class' => 'upload']) ?>
                 <? else: ?>
                     <textarea name="answer[0]" class="character_input size-l" rows="20"><?= htmlReady($answer) ?></textarea>
                 <? endif ?>
@@ -97,7 +97,7 @@
                         <td>
                             <input type="hidden" name="file_ids[]" value="<?= $file_ref->id ?>">
                             <a href="<?= htmlReady($file_ref->getDownloadURL()) ?>">
-                                <?= Icon::create('file')->asImg(['title' => _('Datei herunterladen')]) ?>
+                                <?= Icon::create('file')->asSvg(['title' => _('Datei herunterladen')]) ?>
                                 <?= htmlReady($file_ref->name) ?>
                             </a>
                         </td>
@@ -121,7 +121,7 @@
         <tfoot>
             <tr>
                 <td colspan="5">
-                    <?= Studip\Button::create(_('Datei als Lösung hochladen'), '', ['class' => 'vips_file_upload', 'data-label' => _('%d Dateien ausgewählt')]) ?>
+                    <?= Studip\Button::create(_('Datei als Lösung hochladen'), '', ['class' => 'upload vips_file_upload', 'data-label' => _('%d Dateien ausgewählt')]) ?>
                     <span class="file_upload_hint" style="display: none;"><?= _('Klicken Sie auf „Speichern“, um die gewählten Dateien hochzuladen.') ?></span>
                     <input class="file_upload attach" style="display: none;" type="file" name="upload[]" multiple>
                 </td>
diff --git a/app/views/vips/sheets/add_exercise_dialog.php b/app/views/vips/sheets/add_exercise_dialog.php
index f13a08d..2858485 100644
--- a/app/views/vips/sheets/add_exercise_dialog.php
+++ b/app/views/vips/sheets/add_exercise_dialog.php
@@ -15,10 +15,12 @@
 
         <div class="exercise_types">
             <? foreach ($exercise_types as $type => $entry): ?>
-                <button class="exercise_type" name="exercise_type" value="<?= htmlReady($type) ?>"
-                        style="<?= $type::getTypeIcon()->asCSS(40) ?>">
-                    <b><?= htmlReady($entry['name']) ?></b><br>
-                    <?= htmlReady($type::getTypeDescription()) ?>
+                <button class="exercise_type" name="exercise_type" value="<?= htmlReady($type) ?>">
+                    <?= $type::getTypeIcon()->asSvg(40) ?>
+                    <div class="exercise_type_description">
+                        <span class="exercise_type_name"><?= htmlReady($entry['name']) ?></span>
+                        <span><?= htmlReady($type::getTypeDescription()) ?></span>
+                    </div>
                 </button>
             <? endforeach ?>
         </div>
diff --git a/app/views/vips/sheets/content_bar_icons.php b/app/views/vips/sheets/content_bar_icons.php
index 5d6268a..b0f98c1 100644
--- a/app/views/vips/sheets/content_bar_icons.php
+++ b/app/views/vips/sheets/content_bar_icons.php
@@ -1,19 +1,19 @@
 <? if (isset($prev_exercise_url)): ?>
     <a href="<?= htmlReady($prev_exercise_url) ?>">
-        <?= Icon::create('arr_1left')->asImg(24, ['title' => _('Vorige Aufgabe')]) ?>
+        <?= Icon::create('arr_1left')->asSvg(24, ['title' => _('Vorige Aufgabe')]) ?>
     </a>
 <? else: ?>
     <span>
-        <?= Icon::create('arr_1left', Icon::ROLE_INACTIVE)->asImg(24) ?>
+        <?= Icon::create('arr_1left', Icon::ROLE_INACTIVE)->asSvg(24) ?>
     </span>
 <? endif ?>
 
 <? if (isset($next_exercise_url)): ?>
     <a href="<?= htmlReady($next_exercise_url) ?>">
-        <?= Icon::create('arr_1right')->asImg(24, ['title' => _('Nächste Aufgabe')]) ?>
+        <?= Icon::create('arr_1right')->asSvg(24, ['title' => _('Nächste Aufgabe')]) ?>
     </a>
 <? else: ?>
     <span>
-        <?= Icon::create('arr_1right', Icon::ROLE_INACTIVE)->asImg(24) ?>
+        <?= Icon::create('arr_1right', Icon::ROLE_INACTIVE)->asSvg(24) ?>
     </span>
 <? endif ?>
diff --git a/app/views/vips/sheets/copy_assignment_dialog.php b/app/views/vips/sheets/copy_assignment_dialog.php
index 49eecb9..f7c8209 100644
--- a/app/views/vips/sheets/copy_assignment_dialog.php
+++ b/app/views/vips/sheets/copy_assignment_dialog.php
@@ -67,7 +67,7 @@
                                 <?= htmlReady($assignment['test_title']) ?>
 
                                 <a href="<?= $controller->link_for('vips/sheets/show_assignment', ['cid' => $course_id, 'assignment_id' => $assignment['id']]) ?>" target="_blank">
-                                    <?= Icon::create('link-intern')->asImg(['title' => _('Vorschau anzeigen')]) ?>
+                                    <?= Icon::create('link-intern')->asSvg(['title' => _('Vorschau anzeigen')]) ?>
                                 </a>
                             </label>
                         </td>
diff --git a/app/views/vips/sheets/copy_exercise_dialog.php b/app/views/vips/sheets/copy_exercise_dialog.php
index 7eeec26..d825ce1 100644
--- a/app/views/vips/sheets/copy_exercise_dialog.php
+++ b/app/views/vips/sheets/copy_exercise_dialog.php
@@ -90,7 +90,7 @@
 
                                 <a href="<?= $controller->link_for('vips/sheets/preview_exercise', ['assignment_id' => $exercise['assignment_id'], 'exercise_id' => $exercise['id']]) ?>"
                                    data-dialog="id=vips_preview;size=800x600" target="_blank">
-                                    <?= Icon::create('question-circle')->asImg(['title' => _('Vorschau anzeigen')]) ?>
+                                    <?= Icon::create('question-circle')->asSvg(['title' => _('Vorschau anzeigen')]) ?>
                                 </a>
                             </label>
                         </td>
diff --git a/app/views/vips/sheets/edit_assignment.php b/app/views/vips/sheets/edit_assignment.php
index d6e1b78..5ced547 100644
--- a/app/views/vips/sheets/edit_assignment.php
+++ b/app/views/vips/sheets/edit_assignment.php
@@ -81,8 +81,8 @@
         <section>
             <input id="options-toggle" class="options-toggle" type="checkbox" value="on" <?= $assignment_id ? '' : 'checked' ?>>
             <a class="caption" href="#" role="button" data-toggles="#options-toggle" aria-controls="options-panel" aria-expanded="<?= $assignment_id ? 'false' : 'true' ?>">
-                <?= Icon::create('arr_1down')->asImg(['class' => 'toggle-open']) ?>
-                <?= Icon::create('arr_1right')->asImg(['class' => 'toggle-closed']) ?>
+                <?= Icon::create('arr_1down')->asSvg(['class' => 'toggle-open']) ?>
+                <?= Icon::create('arr_1right')->asSvg(['class' => 'toggle-closed']) ?>
                 <?= _('Weitere Einstellungen') ?>
             </a>
 
@@ -191,8 +191,8 @@
             <div class="practice-hidden exam-hidden">
                 <input id="feedback-toggle" class="options-toggle" type="checkbox" value="on">
                 <a class="caption" href="#" role="button" data-toggles="#feedback-toggle" aria-controls="feedback-panel" aria-expanded="false">
-                    <?= Icon::create('arr_1down')->asImg(['class' => 'toggle-open']) ?>
-                    <?= Icon::create('arr_1right')->asImg(['class' => 'toggle-closed']) ?>
+                    <?= Icon::create('arr_1down')->asSvg(['class' => 'toggle-open']) ?>
+                    <?= Icon::create('arr_1right')->asSvg(['class' => 'toggle-closed']) ?>
                     <?= _('Automatisches Feedback') ?>
                 </a>
 
diff --git a/app/views/vips/sheets/edit_exercise.php b/app/views/vips/sheets/edit_exercise.php
index 2bac01e..41156e1 100644
--- a/app/views/vips/sheets/edit_exercise.php
+++ b/app/views/vips/sheets/edit_exercise.php
@@ -75,7 +75,7 @@
                             <td>
                                 <input type="hidden" name="file_ids[]" value="<?= $file_ref->id ?>">
                                 <a href="<?= htmlReady($file_ref->getDownloadURL()) ?>" <?= $file_ref->getContentDisposition() === 'inline' ? 'target="_blank"' : '' ?>>
-                                    <?= Icon::create('file')->asImg(['title' => _('Datei herunterladen')]) ?>
+                                    <?= Icon::create('file')->asSvg(['title' => _('Datei herunterladen')]) ?>
                                     <?= htmlReady($file_ref->name) ?>
                                 </a>
                             </td>
@@ -102,7 +102,7 @@
             <tfoot>
                 <tr>
                     <td colspan="5">
-                        <?= Studip\Button::create(_('Dateien zur Aufgabe hochladen'), '', ['class' => 'vips_file_upload', 'data-label' => _('%d Dateien ausgewählt')]) ?>
+                        <?= Studip\Button::create(_('Dateien zur Aufgabe hochladen'), '', ['class' => 'upload vips_file_upload', 'data-label' => _('%d Dateien ausgewählt')]) ?>
                         <span class="file_upload_hint" style="display: none;"><?= _('Klicken Sie auf „Speichern“, um die gewählten Dateien hochzuladen.') ?></span>
                         <?= tooltipIcon(sprintf(_('max. %g MB pro Datei'), FileManager::getUploadTypeConfig($assignment->range_id)['file_size'] / 1048576)) ?>
                         <input class="file_upload attach" style="display: none;" type="file" name="upload[]" multiple>
@@ -122,8 +122,8 @@
 
         <input id="options-toggle" class="options-toggle" type="checkbox" value="on">
         <a class="caption" href="#" role="button" data-toggles="#options-toggle" aria-controls="options-panel" aria-expanded="false">
-            <?= Icon::create('arr_1down')->asImg(['class' => 'toggle-open']) ?>
-            <?= Icon::create('arr_1right')->asImg(['class' => 'toggle-closed']) ?>
+            <?= Icon::create('arr_1down')->asSvg(['class' => 'toggle-open']) ?>
+            <?= Icon::create('arr_1right')->asSvg(['class' => 'toggle-closed']) ?>
             <?= _('Weitere Einstellungen') ?>
         </a>
 
diff --git a/app/views/vips/sheets/show_assignment.php b/app/views/vips/sheets/show_assignment.php
index d598e51..1494b74 100644
--- a/app/views/vips/sheets/show_assignment.php
+++ b/app/views/vips/sheets/show_assignment.php
@@ -56,8 +56,8 @@
     <form class="default width-1200" style="margin-bottom: 1.5ex;">
         <input id="options-toggle" class="options-toggle" type="checkbox" value="on">
         <a class="caption" href="#" role="button" data-toggles="#options-toggle" aria-controls="options-panel" aria-expanded="false">
-            <?= Icon::create('arr_1down')->asImg(['class' => 'toggle-open']) ?>
-            <?= Icon::create('arr_1right')->asImg(['class' => 'toggle-closed']) ?>
+            <?= Icon::create('arr_1down')->asSvg(['class' => 'toggle-open']) ?>
+            <?= Icon::create('arr_1right')->asSvg(['class' => 'toggle-closed']) ?>
             <?= _('Teilnahmebedingungen') ?>
         </a>
 
@@ -148,9 +148,9 @@
                         </td>
                         <td style="text-align: center;">
                             <? if ($solution): ?>
-                                <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('ja')]) ?>
+                                <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('ja')]) ?>
                             <? else : ?>
-                                <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('nein')]) ?>
+                                <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('nein')]) ?>
                             <? endif ?>
                         </td>
                         <td style="text-align: center;">
diff --git a/app/views/vips/sheets/show_exercise_link.php b/app/views/vips/sheets/show_exercise_link.php
index 6f41a6a..1abc369 100644
--- a/app/views/vips/sheets/show_exercise_link.php
+++ b/app/views/vips/sheets/show_exercise_link.php
@@ -17,7 +17,7 @@
     </div>
     <div class="sidebar_exercise_state">
         <? if ($assignment->getSolution($solver_id, $item->task_id)): ?>
-            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('Aufgabe bearbeitet')]) ?>
+            <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('Aufgabe bearbeitet')]) ?>
         <? endif ?>
     </div>
 </a>
diff --git a/app/views/vips/solutions/assignment_solutions.php b/app/views/vips/solutions/assignment_solutions.php
index 388574c..472d7ef 100644
--- a/app/views/vips/solutions/assignment_solutions.php
+++ b/app/views/vips/solutions/assignment_solutions.php
@@ -65,8 +65,8 @@
                 <th style="width: 1em;"></th>
                 <th>
                     <a href="#" class="solution-toggle">
-                        <?= Icon::create('arr_1right')->asImg(['class' => 'arrow_all', 'title' => _('Aufgaben aller Teilnehmenden anzeigen')]) ?>
-                        <?= Icon::create('arr_1down')->asImg(['class' => 'arrow_all', 'title' => _('Aufgaben aller Teilnehmenden verstecken'), 'style' => 'display: none;']) ?>
+                        <?= Icon::create('arr_1right')->asSvg(['class' => 'arrow_all', 'title' => _('Aufgaben aller Teilnehmenden anzeigen')]) ?>
+                        <?= Icon::create('arr_1down')->asSvg(['class' => 'arrow_all', 'title' => _('Aufgaben aller Teilnehmenden verstecken'), 'style' => 'display: none;']) ?>
                         <?= _('Teilnehmende') ?>
                     </a>
                 </th>
@@ -108,8 +108,8 @@
 
                     <td>
                         <a href="#" class="solution-toggle">
-                            <?= Icon::create('arr_1right')->asImg(['class' => 'solution-open', 'title' => _('Aufgaben anzeigen')]) ?>
-                            <?= Icon::create('arr_1down')->asImg(['class' => 'solution-close', 'title' => _('Aufgaben verstecken')]) ?>
+                            <?= Icon::create('arr_1right')->asSvg(['class' => 'solution-open', 'title' => _('Aufgaben anzeigen')]) ?>
+                            <?= Icon::create('arr_1down')->asSvg(['class' => 'solution-close', 'title' => _('Aufgaben verstecken')]) ?>
                             <?= htmlReady($solver['name']) ?>
                         </a>
 
diff --git a/app/views/vips/solutions/assignments_list.php b/app/views/vips/solutions/assignments_list.php
index c685e9a..851fd47 100644
--- a/app/views/vips/solutions/assignments_list.php
+++ b/app/views/vips/solutions/assignments_list.php
@@ -109,9 +109,9 @@
                                     <? if (!isset($ass['uncorrected_solutions'])): ?>
                                         &ndash;
                                     <? elseif ($ass['uncorrected_solutions'] == 0): ?>
-                                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('ja')]) ?>
+                                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('ja')]) ?>
                                     <? else : ?>
-                                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('nein')]) ?>
+                                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('nein')]) ?>
                                     <? endif ?>
                                 </td>
 
diff --git a/app/views/vips/solutions/edit_solution.php b/app/views/vips/solutions/edit_solution.php
index 64bd8bb..327342f 100644
--- a/app/views/vips/solutions/edit_solution.php
+++ b/app/views/vips/solutions/edit_solution.php
@@ -25,10 +25,10 @@
     <? /* previous solver */ ?>
     <? if (isset($prev_solver)): ?>
         <a href="<?= $controller->edit_solution(['assignment_id' => $assignment_id, 'exercise_id' => $exercise_id, 'solver_id' => $prev_solver['user_id'], 'view' => $view]) ?>">
-            <?= Icon::create('arr_1left')->asImg(['title' => _('Voriger Teilnehmer / vorige Teilnehmerin')]) ?>
+            <?= Icon::create('arr_1left')->asSvg(['title' => _('Voriger Teilnehmer / vorige Teilnehmerin')]) ?>
         </a>
     <? else: ?>
-        <?= Icon::create('arr_1left', Icon::ROLE_INACTIVE)->asImg(['title' => _('Keiner der vorhergehenden Teilnehmenden hat diese Aufgabe bearbeitet')]) ?>
+        <?= Icon::create('arr_1left', Icon::ROLE_INACTIVE)->asSvg(['title' => _('Keiner der vorhergehenden Teilnehmenden hat diese Aufgabe bearbeitet')]) ?>
     <? endif ?>
 
     <? /* overview */ ?>
@@ -39,10 +39,10 @@
     <? /* next solver */ ?>
     <? if (isset($next_solver)): ?>
         <a href="<?= $controller->edit_solution(['assignment_id' => $assignment_id, 'exercise_id' => $exercise_id, 'solver_id' => $next_solver['user_id'], 'view' => $view]) ?>">
-            <?= Icon::create('arr_1right')->asImg(['title' => _('Nächster Teilnehmer / nächste Teilnehmerin')]) ?>
+            <?= Icon::create('arr_1right')->asSvg(['title' => _('Nächster Teilnehmer / nächste Teilnehmerin')]) ?>
         </a>
     <? else: ?>
-        <?= Icon::create('arr_1right', Icon::ROLE_INACTIVE)->asImg(['title' => _('Keiner der nachfolgenden Teilnehmenden hat diese Aufgabe bearbeitet')]) ?>
+        <?= Icon::create('arr_1right', Icon::ROLE_INACTIVE)->asSvg(['title' => _('Keiner der nachfolgenden Teilnehmenden hat diese Aufgabe bearbeitet')]) ?>
     <? endif ?>
 
     &nbsp;/&nbsp;
@@ -50,10 +50,10 @@
     <? /* previous exercise */ ?>
     <? if (isset($prev_exercise)): ?>
         <a href="<?= $controller->edit_solution(['assignment_id' => $assignment_id, 'exercise_id' => $prev_exercise['id'], 'solver_id' => $solver_id, 'view' => $view]) ?>">
-            <?= Icon::create('arr_1left')->asImg(['title' => _('Vorige Aufgabe')]) ?>
+            <?= Icon::create('arr_1left')->asSvg(['title' => _('Vorige Aufgabe')]) ?>
         </a>
     <? else: ?>
-        <?= Icon::create('arr_1left', Icon::ROLE_INACTIVE)->asImg(['title' => _('Die teilnehmende Person hat keine der vorhergehenden Aufgaben bearbeitet')]) ?>
+        <?= Icon::create('arr_1left', Icon::ROLE_INACTIVE)->asSvg(['title' => _('Die teilnehmende Person hat keine der vorhergehenden Aufgaben bearbeitet')]) ?>
     <? endif ?>
 
     <? /* exercise name */ ?>
@@ -62,10 +62,10 @@
     <? /* next exercise */ ?>
     <? if (isset($next_exercise)): ?>
         <a href="<?= $controller->edit_solution(['assignment_id' => $assignment_id, 'exercise_id' => $next_exercise['id'], 'solver_id' => $solver_id, 'view' => $view]) ?>">
-            <?= Icon::create('arr_1right')->asImg(['title' => _('Nächste Aufgabe')]) ?>
+            <?= Icon::create('arr_1right')->asSvg(['title' => _('Nächste Aufgabe')]) ?>
         </a>
     <? else: ?>
-        <?= Icon::create('arr_1right', Icon::ROLE_INACTIVE)->asImg(['title' => _('Die teilnehmende Person hat keine der nachfolgenden Aufgaben bearbeitet')]) ?>
+        <?= Icon::create('arr_1right', Icon::ROLE_INACTIVE)->asSvg(['title' => _('Die teilnehmende Person hat keine der nachfolgenden Aufgaben bearbeitet')]) ?>
     <? endif ?>
 </div>
 
@@ -147,7 +147,7 @@
                                 <td>
                                     <input type="hidden" name="file_ids[]" value="<?= htmlReady($file_ref->id) ?>">
                                     <a href="<?= htmlReady($file_ref->getDownloadURL()) ?>">
-                                        <?= Icon::create('file')->asImg(['title' => _('Datei herunterladen')]) ?>
+                                        <?= Icon::create('file')->asSvg(['title' => _('Datei herunterladen')]) ?>
                                         <?= htmlReady($file_ref->name) ?>
                                     </a>
                                 </td>
@@ -171,7 +171,7 @@
                 <tfoot>
                     <tr>
                         <td colspan="5">
-                            <?= Studip\Button::create(_('Dateien zur Korrektur hochladen'), '', ['class' => 'vips_file_upload', 'data-label' => _('%d Dateien ausgewählt')]) ?>
+                            <?= Studip\Button::create(_('Dateien zur Korrektur hochladen'), '', ['class' => 'upload vips_file_upload', 'data-label' => _('%d Dateien ausgewählt')]) ?>
                             <span class="file_upload_hint" style="display: none;"><?= _('Klicken Sie auf „Speichern“, um die gewählten Dateien hochzuladen.') ?></span>
                             <?= tooltipIcon(sprintf(_('max. %g MB pro Datei'), FileManager::getUploadTypeConfig($assignment->range_id)['file_size'] / 1048576)) ?>
                             <input class="file_upload attach" style="display: none;" type="file" name="upload[]" multiple>
diff --git a/app/views/vips/solutions/feedback_files_table.php b/app/views/vips/solutions/feedback_files_table.php
index dff9869..8c6757c 100644
--- a/app/views/vips/solutions/feedback_files_table.php
+++ b/app/views/vips/solutions/feedback_files_table.php
@@ -31,7 +31,7 @@
                 <tr>
                     <td>
                         <a href="<?= htmlReady($file_ref->getDownloadURL()) ?>">
-                            <?= Icon::create('file')->asImg(['title' => _('Datei herunterladen')]) ?>
+                            <?= Icon::create('file')->asSvg(['title' => _('Datei herunterladen')]) ?>
                             <?= htmlReady($file_ref->name) ?>
                         </a>
                     </td>
diff --git a/app/views/vips/solutions/student_assignment_solutions.php b/app/views/vips/solutions/student_assignment_solutions.php
index d5b717a..b279a36 100644
--- a/app/views/vips/solutions/student_assignment_solutions.php
+++ b/app/views/vips/solutions/student_assignment_solutions.php
@@ -64,9 +64,9 @@
                 </td>
                 <td style="text-align: center;">
                     <? if ($solution): ?>
-                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asImg(['title' => _('ja')]) ?>
+                        <?= Icon::create('accept', Icon::ROLE_STATUS_GREEN)->asSvg(['title' => _('ja')]) ?>
                     <? else : ?>
-                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asImg(['title' => _('nein')]) ?>
+                        <?= Icon::create('decline', Icon::ROLE_STATUS_RED)->asSvg(['title' => _('nein')]) ?>
                     <? endif ?>
                 </td>
                 <td style="text-align: center;">