diff --git a/client/index.html b/client/index.html
index 11f9aef5..31fdea1c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -7,6 +7,7 @@
+
myVBV
diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index e1af43eb..3dd68457 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/client/src/components/circle/LearningSequence.vue
@@ -1,8 +1,5 @@
@@ -31,8 +28,8 @@ defineProps(['learningSequence'])
v-for="learningUnit in learningPackage.learningUnits"
class="flex items-center gap-4 pb-3"
>
-
-
+
+
{{ learningUnit.contents[0].type }}: {{ learningUnit.title }}
diff --git a/client/src/components/icons/IconArrowDown.vue b/client/src/components/icons/IconArrowDown.vue
deleted file mode 100644
index 96f7b2d0..00000000
--- a/client/src/components/icons/IconArrowDown.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconArrowLeft.vue b/client/src/components/icons/IconArrowLeft.vue
deleted file mode 100644
index eee84291..00000000
--- a/client/src/components/icons/IconArrowLeft.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconArrowRight.vue b/client/src/components/icons/IconArrowRight.vue
deleted file mode 100644
index 907d78b1..00000000
--- a/client/src/components/icons/IconArrowRight.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconArrowUp.vue b/client/src/components/icons/IconArrowUp.vue
deleted file mode 100644
index 1c9cc238..00000000
--- a/client/src/components/icons/IconArrowUp.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconCheck.vue b/client/src/components/icons/IconCheck.vue
deleted file mode 100644
index db492cd1..00000000
--- a/client/src/components/icons/IconCheck.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconCheckboxChecked.vue b/client/src/components/icons/IconCheckboxChecked.vue
deleted file mode 100644
index 79718f51..00000000
--- a/client/src/components/icons/IconCheckboxChecked.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconCheckboxUnchecked.vue b/client/src/components/icons/IconCheckboxUnchecked.vue
deleted file mode 100644
index 0d84821c..00000000
--- a/client/src/components/icons/IconCheckboxUnchecked.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconClose.vue b/client/src/components/icons/IconClose.vue
deleted file mode 100644
index bd32921e..00000000
--- a/client/src/components/icons/IconClose.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconLsApply.vue b/client/src/components/icons/IconLsApply.vue
deleted file mode 100644
index 3c2dae05..00000000
--- a/client/src/components/icons/IconLsApply.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconLsEnd.vue b/client/src/components/icons/IconLsEnd.vue
deleted file mode 100644
index 00aa08ce..00000000
--- a/client/src/components/icons/IconLsEnd.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconLsNetwork.vue b/client/src/components/icons/IconLsNetwork.vue
deleted file mode 100644
index bcfb5d35..00000000
--- a/client/src/components/icons/IconLsNetwork.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconLsPractice.vue b/client/src/components/icons/IconLsPractice.vue
deleted file mode 100644
index 940f9e26..00000000
--- a/client/src/components/icons/IconLsPractice.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconLsTest.vue b/client/src/components/icons/IconLsTest.vue
deleted file mode 100644
index 050448d0..00000000
--- a/client/src/components/icons/IconLsTest.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconLsWatch.vue b/client/src/components/icons/IconLsWatch.vue
deleted file mode 100644
index e2e3bb75..00000000
--- a/client/src/components/icons/IconLsWatch.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconMessage.vue b/client/src/components/icons/IconMessage.vue
deleted file mode 100644
index 5bd94641..00000000
--- a/client/src/components/icons/IconMessage.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconSmileyHappy.vue b/client/src/components/icons/IconSmileyHappy.vue
deleted file mode 100644
index 5d6829bb..00000000
--- a/client/src/components/icons/IconSmileyHappy.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconSmileyNeutral.vue b/client/src/components/icons/IconSmileyNeutral.vue
deleted file mode 100644
index c48f93c2..00000000
--- a/client/src/components/icons/IconSmileyNeutral.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
diff --git a/client/src/components/icons/IconSmileyThinking.vue b/client/src/components/icons/IconSmileyThinking.vue
deleted file mode 100644
index 990bef88..00000000
--- a/client/src/components/icons/IconSmileyThinking.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
diff --git a/client/src/main.ts b/client/src/main.ts
index 3707db7e..b0b3f535 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -5,14 +5,6 @@ import {setupI18n} from './i18n'
import App from './App.vue'
import router from './router'
-import IconLsApply from '@/components/icons/IconLsApply.vue';
-import IconLsWatch from '@/components/icons/IconLsWatch.vue';
-import IconLsTest from '@/components/icons/IconLsTest.vue';
-import IconLsPractice from '@/components/icons/IconLsPractice.vue';
-import IconLsNetwork from '@/components/icons/IconLsNetwork.vue';
-import IconLsStart from '@/components/icons/IconLsStart.vue';
-import IconLsEnd from '@/components/icons/IconLsEnd.vue';
-
import '@/assets/styles/index.scss'
const i18n = setupI18n()
@@ -26,12 +18,3 @@ app.use(router)
app.use(i18n)
app.mount('#app')
-
-// register icons globally
-app.component('IconLsApply', IconLsApply)
-app.component('IconLsWatch', IconLsWatch)
-app.component('IconLsTest', IconLsTest)
-app.component('IconLsPractice', IconLsPractice)
-app.component('IconLsNetwork', IconLsNetwork)
-app.component('IconLsStart', IconLsStart)
-app.component('IconLsEnd', IconLsEnd)
diff --git a/client/src/views/StyelGuideView.vue b/client/src/views/StyelGuideView.vue
index 204fb30c..44ccd7ed 100644
--- a/client/src/views/StyelGuideView.vue
+++ b/client/src/views/StyelGuideView.vue
@@ -1,26 +1,6 @@
+
{% block javascript %}
diff --git a/server/vbv_lernwelt/templates/learnpath/icons.js b/server/vbv_lernwelt/templates/learnpath/icons.js
new file mode 100644
index 00000000..f03cc06b
--- /dev/null
+++ b/server/vbv_lernwelt/templates/learnpath/icons.js
@@ -0,0 +1,29 @@
+/*
+create custom element classes from svg files
+example:
+
+class icon_arrow_up extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `
+`;
+ }
+}
+
+customElements.define('it-icon-arrow-up', icon_arrow_up);
+*/
+
+
+{% for svg_icon in svg_files %}
+
+class {{ svg_icon.classname }} extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = `{{ svg_icon.content|safe }}`;
+ }
+}
+
+customElements.define('{{ svg_icon.elementname }}', {{ svg_icon.classname }});
+
+{% endfor %}