# Einbinden von SVG-Icons in neuem Theme
**URL:** https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774
**Category:** Themes & Design
**Created:** [31. Juli 2019 um 13:56 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774 "2019-07-31T13:56:57Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@kzap](https://forum.shopware.com/u/kzap)
#### Post date: [31. Juli 2019 um 13:56 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/1 "2019-07-31T13:56:57Z")
Hallo zusammen,
ich suche mir jetzt seit 2 Tagen den Wolf… Ich hoffe ihr könnt mir den entscheidenen Tipp geben.
Ich habe einen Vagrantserver aufgesetzt mache gerade die ersten Entwicklungsversuche eines neuen Themes.
Ich würde gerne neue/andere Icons (SVG-Dateien) einsetzen, als die bereits vorhandenen.
Die icon.html.twig - Datei enthält einen Pfad auf die Icon-SVGs. Diese werden an direkt in den Quellcode geschrieben.
Sieht im Original so aus:
{{ source(’@Storefront/…/dist/assets/icon/’~ pack ~’/’~ name ~’.svg’, ignore\_missing = true) }}
Jetzt habe ich mir gedacht, so naiv wie ich bin, in den Pfad einfach meine neuen SVGs zu legen bzw. den Pfad in meinem Theme anzupassen und einen neuen Ordner machen.
Egal was ich mache, funktioniert nicht. Ich komme ehrlich gesagt nicht einmal darauf, wo die SVGs auf meinem Server liegen, die verwendet werden
**Die Dateien liegen hier ab:**
Sowohl in der kompilierten theme-Datei:
/home/vagrant/shopware-dev/public/theme/484c0fee1058491d557aa683794b15bc/assets/icon
als auch im storefront-Ordner:
/home/vagrant/shopware-dev/public/bundles/storefront/assets/icon
als auch in meinem-theme-Ordner:
/home/vagrant/shopware-dev/public/bundles/MEINTHEMENAME/assets/icon
Egal wo ich die Icons überschreibe (habe es mit hartem Überschreiben auf dem Server versucht) werden die alten Icons angezeigt.
Hat jemand einen Tipp für mich, wo oder wie ich den Austausch hinbekomme?
Vielen Dank schonmal
Karina
---
### Author:  [@TAB10](https://forum.shopware.com/u/TAB10)
#### Post date: [1. August 2019 um 13:47 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/2 "2019-08-01T13:47:55Z")
Hi.
Kann sein das es irgendwie mit der Vererbung noch nicht ganz hinhaut.
Eine Themeanpassung, bzw. generell Anpassungen sollten mMn. als Plugin gelöst werden.
Das findet alles unter /custom/plugins/DeinPlugin statt.
Siehe hier:
[https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins](https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins)
Was mich extrem verwirrt sind die Ordnerstrukturen.
Es gibt ja das StorefrontAssets Plugin:
[Shopware 6: Using custom CSS and JavaScript in the Storefront](https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets)
welches sich aber vom Theme (per console erstellt) unterscheidet.
Javascripte werden zB. auch nur in der StorefrontAssets Struktur bei mir kompiliert.
Was die Icons angeht hab ich auch mal getestet. das geht zZ. nur wenn unter:
/platform/src/Storefront/Resources/dist/assets/icon
ein “Set” ablegt und dieses in der icon.html.twig zugewiesen wird. Wenn ich das Set aber im Plugin ablege gehts nicht.
Die ganze Ordner Strukturierung ist für mich grade auch sehr verwirrend. (Resources/dist,Resources/storefront/dist, public… usw… blick da auch noch nicht wirklich durch)
---
### Author:  [@kzap](https://forum.shopware.com/u/kzap)
#### Post date: [3. August 2019 um 12:23 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/3 "2019-08-03T12:23:20Z")
Hallo thom,
habe es über mein theme leider nicht geschafft, die Vererbung der Icons so hinzubekommen, dass die Icons aus meinem Pluginordner gezogen werden.
Ich habe auf meinem Vagrant-Server jetzt erstmal die Icons in diesem Pfad getauscht, das hat geklappt und mein Template nutzt jetzt die neuen Icons.
Wenn jemand herausfindet, wie ich die Icons in meinem eigenen Theme ablegen kann und diese dann genommen werden, würde ich mich freuen.
Viele Grüße
Karina
---
### Author:  [@ncnKG](https://forum.shopware.com/u/ncnKG)
#### Post date: [17. Oktober 2019 um 13:17 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/4 "2019-10-17T13:17:32Z")
> [@kzap schrieb:](https://forum.shopware.com/profile/30656/kzap "kzap")
>
> Hallo thom,
>
> habe es über mein theme leider nicht geschafft, die Vererbung der Icons so hinzubekommen, dass die Icons aus meinem Pluginordner gezogen werden.
> Ich habe auf meinem Vagrant-Server jetzt erstmal die Icons in diesem Pfad getauscht, das hat geklappt und mein Template nutzt jetzt die neuen Icons.
>
> 
>
> Wenn jemand herausfindet, wie ich die Icons in meinem eigenen Theme ablegen kann und diese dann genommen werden, würde ich mich freuen.
>
> Viele Grüße
> Karina
Hi Karina,
Versuche mal das–\> {% sw\_icon ‚SVG\_NAME‘ %}
#Beispiel Code nicht getestet:
{% block layout\_header\_actions\_account\_widget\_dropdown\_button %}
type=„button“
id=„accountWidget“
data-offcanvas-account-menu=„true“
data-toggle=„dropdown“
aria-haspopup=„true“
aria-expanded=„false“
aria-label=„{{ „account.myAccount“|trans }}“\>
{% sw\_icon ’ **optionalSVG** ’ %}
{% endblock %}
Mit freundlichen Grüßen
Amin Nayerhabibi
NCN KG
---
### Author:  [@pclaisse](https://forum.shopware.com/u/pclaisse)
#### Post date: [3. Dezember 2019 um 14:56 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/5 "2019-12-03T14:56:10Z")
Falls Jemand auf das gleiche “Problem” stöst, hier einmal eine Lösung:
1. “storefront/utilities/icon.html.twig” im eigenen Theme überladen:
2. Icons in dem entsprechenden Pfad anlegen:
z.B.: MeinThemePlugin/src/Resources/app/storefront/dist/assets/icon/meinpack/custom\_icon.svg
1. Icon mit “Packet”-Angabe einbinden:
---
### Author:  [@wnbartke](https://forum.shopware.com/u/wnbartke)
#### Post date: [6. Februar 2020 um 13:58 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/6 "2020-02-06T13:58:37Z")
@pclaisse Vielen Dank! Das hat sehr geholfen.
Ein Frage ist bei mir noch aufgetaucht. Hast du eine Möglichkeit gefunden mit dieser Methode Icons vom “default” zu überschreiben?
Damit meine ich etwas in Richtung:
```
{{ source('@MeinTheme/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = false) }}
```
Viele Grüße!
Alex
---
### Author:  [@TAB10](https://forum.shopware.com/u/TAB10)
#### Post date: [7. November 2020 um 14:39 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/7 "2020-11-07T14:39:13Z")
Hallo.
Weiss jemand wie sich das bei einem “APP” Theme verhält?
Das scheint in APP Themes nicht wirklich zu funktionieren.
Es lassen sich im Symfony Profiler die vererbten Twigfiles auch nicht öffnen (zb @Storefront/storefront/utilities/icon.html.twig), also die sind nicht klickbar wie bei einem Plugin?!
Scheint sich irgendwie anders zu verhalten in einem APP Theme?! Weiss da jemand mehr und hat einen Tipp?
Gruß
Thom
---
### Author:  [@md\_dm](https://forum.shopware.com/u/md_dm)
#### Post date: [29. April 2021 um 18:09 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/8 "2021-04-29T18:09:00Z")
Ich habe mal zu dieser Thematik eine Frage.
Wenn ich das richtig verstehe definiere ich meine Icons via:
…
/@MeinTheme/…/app/storefront/dist/assets/icon/meinpaket/…
{% else %}
/@Storefront/…/app/storefront/dist/assets/icon/default/…
…
Bedeutet dass dann, wenn ich in meinem Paket z.B. nur 10 Custom SVG’s habe, greift das System auf die Default-SVG Icons zurück und zeigt mir z.B. im Warenkorb das X oder irgendwo anders das Standardicon von SW6 an?
---
### Author:  [@c.haus](https://forum.shopware.com/u/c.haus)
#### Post date: [20. Mai 2021 um 09:57 UTC](https://forum.shopware.com/t/einbinden-von-svg-icons-in-neuem-theme/60774/9 "2021-05-20T09:57:10Z")
Mittlerweile ist dies über den Namespace gelöst. Dort trägt man sein Theme ein und er holt sich dann das entsprechende Icon.
Hier ein Auszug aus der icon.html.twig `{{ source('@' ~ namespace ~ '/../app/storefront/dist/assets/icon/'~ pack ~'/'~ name ~'.svg', ignore_missing = true) }}`