diff --git a/lib/classes/Icon.class.php b/lib/classes/Icon.class.php
index 6f20f7ba11ccf265841cc1af245c5eb88e630ab7..38f979347d914ad67d58572c84daccb215a77bfd 100644
--- a/lib/classes/Icon.class.php
+++ b/lib/classes/Icon.class.php
@@ -112,7 +112,7 @@ class Icon
         return new self($shape, $role, $attributes);
     }
 
-    protected static $rendering_mode = self::RENDERING_MODE_IMG;
+    protected static $rendering_mode = self::RENDERING_MODE_USE;
     protected static $used_shapes = [];
     protected static $used_extras = [];
 
@@ -435,7 +435,7 @@ class Icon
             $result['alt'] = '';
         }
 
-        $classNames = 'icon-role-' . str_replace('_', '-', $this->role);
+        $classNames = 'studipicon icon-role-' . str_replace('_', '-', $this->role);
 
         if (!self::isStatic($this->shape)) {
             $classNames .= ' icon-shape-' . $this->shape;
diff --git a/lib/classes/sidebar/LinkElement.php b/lib/classes/sidebar/LinkElement.php
index 8e3e2706e11d66c4b480211d6c64e6be035c6e69..446a84b7a50cfd2b2f9cb1b923a94eb1d0145db8 100644
--- a/lib/classes/sidebar/LinkElement.php
+++ b/lib/classes/sidebar/LinkElement.php
@@ -211,9 +211,10 @@ class LinkElement extends WidgetElement implements ArrayAccess
         }
 
         return sprintf(
-            '<%1$s %2$s>%3$s</%1$s>',
+            '<%1$s %2$s>%3$s %4$s</%1$s>',
             $tag,
             arrayToHtmlAttributes($attributes),
+            $this->icon ? $this->icon->asImg(null, ['class' => 'text-bottom']) : '',
             htmlReady($this->label)
         );
     }
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index f03d7a2e8fbf2b997922fc53503244775548f0c8..a6c53ffd4a02cfc46fa3ba4351aa92917b7e7390 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -120,7 +120,7 @@ ul.widget-list {
         background-repeat: no-repeat;
         background-position: 0 1px;
         background-size: 16px 16px;
-        padding-left: 20px;
+        padding-left: 2px;
         word-wrap: break-word;
     }
 }
diff --git a/resources/vue/components/StudipIcon.vue b/resources/vue/components/StudipIcon.vue
index a08bdfaa475a4985cdb098281095415b25443561..efc79ddfef312da4b5df28b3475ec4926d5bc241 100644
--- a/resources/vue/components/StudipIcon.vue
+++ b/resources/vue/components/StudipIcon.vue
@@ -9,7 +9,7 @@
         v-bind="$attrs"
         v-on="$listeners"
     />
-    <img v-else :src="url" :width="size" :height="size" v-bind="$attrs" v-on="$listeners" />
+    <img v-else :src="url" :width="size" :height="size" :class="css_class" v-bind="$attrs" v-on="$listeners" />
 </template>
 
 <script lang="ts">
@@ -32,7 +32,7 @@ export default Vue.extend({
         name: {
             type: String,
             required: false,
-        },
+        }
     },
     computed: {
         url(): string {
@@ -72,6 +72,9 @@ export default Vue.extend({
                     return 'blue';
             }
         },
+        css_class(): string {
+            return 'studipicon ' +  this.$attrs.class; //TODO: is this correct?
+        }
     },
 });
 </script>
diff --git a/templates/sidebar/list-widget.php b/templates/sidebar/list-widget.php
index 0507cfab7ceaf5cdf9623ed7e3c594994b143245..8d2aec0df7b7b73d61a7ac6f74988c4fd509a8bd 100644
--- a/templates/sidebar/list-widget.php
+++ b/templates/sidebar/list-widget.php
@@ -1,13 +1,6 @@
 <ul class="<?= implode(' ', $css_classes) ?>" aria-label="<?= htmlReady($title) ?>">
 <? foreach ($elements as $index => $element): ?>
-    <? if ($element instanceof LinkElement): ?>
-        <? $icon = $element->icon ?? null ?>
-        <? if ($icon && $element->isDisabled()): ?>
-            <? $icon = $icon->copyWithRole('inactive') ?>
-        <? endif ?>
-    <? endif ?>
     <li id="<?= htmlReady($index) ?>"
-        <?= isset($icon) ? 'style="' . $icon->asCSS() .'"' : '' ?>
         <?= !empty($element->active) ? 'class="active"' : '' ?>>
         <?= $element->render() ?>
     </li>