[Codebeispiel] Neues Icon Handling in smartVISU

[wvhn]

Hallo zusammen,

das Icon-Handling in smartVISU wurde komplett überarbeitet. Dies ermöglicht ein standardisiertes Styling von Icons und dynamischen Icons mittels 6 Klassen (icon0 bis icon5) und erhöht die Performance großer Seiten auf älteren Geräten deutlich. Neu hinzugekommen sind die Klassen icon2 bis icon5 mit den an die Designs angepassten Farben rot, gelb, grün und blau. Zusätzlich gibt es bei allen Widgets weiterhin die Möglichkeit, Farben über ihre Namen oder hexadezimale Codes anzuwählen.

An den eigenen Seiten sind keine Änderungen erforderlich, wenn man das Styling nicht ändern will.

Hintergrund ( tl;dr )
Bisher wurden alle Icons über <img>-Tags geladen. Da auf diese Weise eingebundene svg Icons für jQuery nicht für das Styling mit Klassen zugänglich sind, wurden bestimmte Icons (u.a. alle Icons der Widgets) mittels der Funktion fx.init() neu geladen und in den html-Code eingebettet. Dadurch war das Styling großer Visu-Seiten recht langsam, insbesondere auf älteren Geräten. Das neue Handling verwendet die Twig-Funktion source(), um die svg Icons direkt beim Rendern der Seite in den html-Code einzubetten, wobei nicht benötigte Attribute herausgefiltert werden. Dadurch muss jedes Icon nur einmal geladen werden, was Zeit spart. Noch größer ist der Performance-Gewinn, wenn man den smartVISU Cache aktiviert. Da die Icons bereits im html integriert sind, werden sie vom Cache mit gespeichert, was vorher nicht der Fall war.

Eigene Widgets
Wer eigene Widgets schreiben möchte, die svg-Icons selbst laden, hat das Makro {{ lib.svgimg (id, Dateiname, Klassen, Stylingoptionen }} zur Verfügung. Diese Methode ist aus den o.g. Gründen zu bevorzugen auch wenn <img>-Tags weiter verwendet werden können. Für das dynamische Laden von Icons (z.B. bei Kalendereinträgen) gibt es die Funktion fx.load(Dateiname, Klassen, Stylingoptionen, Visu-Element, Einfügemethode). Dokumentation hierzu findet sich in der ./lib/base/base.js.

Tester gesucht!
Die Änderung ist jetzt im develop branch verfügbar. Alles ist mit meinen eigenen Seiten und den Doku-Seiten getestet. Dennoch wäre ich für weitere Tester dankbar!

Gruß
Wolfram

[loeserman]

Hi,
das klingt ja cool. Würde mich als Tester anbieten. Muss ich dazu nur einen Pull auf den develop branch machen? Dann kann ich das mal ausprobieren. Ist sonst noch etwas anzupassen?

Gruß
Christoph

[loeserman]

So habe mal geswitched. Irgendetwas scheint aber noch nicht richtig zu sein bei mir. Die Icons zeigen keine Farbe an. Auch hatte ich anfangs eine Fehlermeldung das die Datenbverbindung zu "smarthomeNG" nicht funktioniert und auf "Offline" umgestellt wurde (Could not connect to smarthomeNG server! Websocket error undefined.). Habe es dann wieder auf "smarthomeNG" umgestellt und kann auch bedienen. Aber die Icons bleiben alle in weiss.

Wie sehen meine Icons aus (ich habe es moduarisiert. Daher ist gad ein Tag der übergeben wird. Das funktionierte immer und

{{ basic.stateswitch('', 'mein TAG', 'icon', [1,0], ['light_light_dim_100.svg', 'light_light_dim_100.svg'], '', ['icon1', 'icon0'], 'blink') }}

Muss ich vielleicht noch etwas anderes einstellen? Oder wurde auch etwas an der Schnittstelle gemacht?

smartVISU = v3.2.c
smarthomeNG = v1.9.2-master

[bmx]

loeserman Es gibt einige Einstellungen, die Du in eigenen Dateien ggf. nachbauen musst: z.B. die ./pages/<deineseitenhier>/menu.html sollte mit der ./pages/base/menu.html abgeglichen werden:


Also das bei den Icons dann sowas in der Art steht:

<img class="icon{% if page == 'index' %} icon1{% else %} icon0{% endif %}"  .....   />

[wvhn]

Hallo Christoph,

Danke fürs Testen.

Die beschriebene Fehlermeldung aus dem Treiber kommt daher, dass der alte smarthomeNG-Treiber (io_smarthome.py.js) bei Dir noch aktiv war. Den habe ich entfernt zu Gunsten des neuen Treibers (io_smarthomeng.js). Damit smartVISU sauber startet, muss sie das Fehlen des Treibers erkennen und abfangen. So musstest Du einmalig nochmal auf die Config-Seite gehen.
Wichtig: wenn Du die Visu nicht per IP-Adresse, sondern per Hostnamen aufrufst, muss der smartVISU Hostname auf der Config-Seite eingegeben werden.
Das scheint aber geklappt zu haben. Wenn Du mit der Visu "bedienen kannst", interpretiere ich das so, dass shNG auf die Visu reagiert, also die Verbindung zum Backend steht.

Einzige Bedingung für das neue Handling der Icons ist, dass diese in einem der Ordner "./icons/ws" und "/.dropins/icons/ws" vorhanden sein müssen. Das ist mit Deinem Beispiel gegeben. Ansonsten ist alles auf Rückwärtskompatibilität ausgelegt. Einen Bug mit Icons, die nicht in einem der Ordner liegen und mit dem kompletten Pfad angegeben sind, habe ich heute Nachmittag noch gefixt. Die Änderung ist im Develop.

Zur Sicherheit solltest Du den Browsercache noch löschen, da manche Browser geänderte CSS-Dateien nicht zuverlässig erkennen und laden.

Wenn das nicht hilft, mach mal bitte einen Rechtsklick auf das Icon und wähle im Kontextmenü "untersuchen". Interessant ist, ob das Icon als img oder svg eingebettet ist. Bei mir sieht das im Widget Assistant mit Deinem Beispiel so aus:

<a data-widget="basic.stateswitch" data-val="0" data-index="1" data-col="icon0" class="icon0 switch ui-link">                            
     <svg class="icon icon0" role="img" aria-label="light_light_dim_100" xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321">
    </svg>
</a>

Die Klasse icon0 kannst Du dort testweise manuell ändern.

Gruß
Wolfram

[loeserman]

So das sieht schon besser aus. Anscheinend war es mal wieder was mit dem Cache.

Ein bsheriges Icon sieht bei "Untersuchen" folgendermaßen aus. Sollte eigentlich passen, oder?

<a data-widget="basic.stateswitch" data-val="0" data-index="1" data-col="icon0" class="icon0 switch ui-link">
	<svg class="icon  icon0 " role="img" aria-label="light_light_dim_100" xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321">
		<g>
			<path d="m161.189,248.056c12.286,2.099 24.573,4.196 36.859,6.295 6.306,1.077 9.006-8.559 2.658-9.643-12.286-2.099-24.573-4.196-36.859-6.295-6.305-1.077-9.005,8.559-2.658,9.643z"></path>
			<path d="m161.568,261.306c12.286,2.099 24.572,4.196 36.858,6.295 6.306,1.077 9.006-8.559 2.658-9.643-12.286-2.099-24.572-4.196-36.858-6.295-6.305-1.077-9.005,8.559-2.658,9.643z"></path>
			<path d="m161.568,274.178c12.286,2.098 24.572,4.196 36.858,6.294 6.306,1.077 9.006-8.559 2.658-9.643-12.286-2.098-24.572-4.196-36.858-6.294-6.305-1.077-9.005,8.559-2.658,9.643z"></path>
			<path d="m169.414,287.919c6.895,1.177 13.79,2.354 20.685,3.531 6.306,1.076 9.006-8.56 2.658-9.643-6.895-1.177-13.79-2.354-20.685-3.531-6.306-1.076-9.006,8.56-2.658,9.643z"></path>
			<path d="m207.144,212.143c-.341,9.681-8.01,13.822-16.692,13.822-7.013,0-14.026,0-21.039,0-8.104,0-15.012-5.457-15.012-13.996 0-4.135 0-8.271 0-12.405 0-15.173 0-30.345 0-45.517 0-3.714-.417-7.771 .237-11.456 1.636-9.222 9.999-11.199 17.885-11.199 5.5,0 11,0 16.499,0 5.02,0 9.565,.06 13.623,3.612 6.159,5.392 4.5,15.458 4.5,22.791-.001,18.115-.001,36.231-.001,54.348 0,6.448 10,6.448 10,0 0-22.303 0-44.605 0-66.908 0-10.783-7.24-19.668-17.282-22.934-6.056-1.969-13.839-.909-20.08-.909-6.753,0-14.117-.791-20.507,1.785-8.985,3.62-14.875,12.547-14.875,22.212 0,22.245 0,44.489 0,66.734 0,10.43 6.662,18.748 16.059,22.535 5.704,2.298 13.314,1.307 19.323,1.307 6.218,0 12.671,.497 18.821-.595 11.008-1.952 18.168-12.63 18.541-23.228 .226-6.452-9.775-6.429-10,.001z"></path>
			<path d="m89.125,142.333c9.638,0 19.275,0 28.913,0 6.449,0 6.449-10 0-10-9.638,0-19.275,0-28.913,0-6.448,0-6.448,10 0,10z"></path>
			<path d="m103.853,86.528c6.815,6.814 13.63,13.629 20.444,20.444 4.564,4.563 11.635-2.507 7.071-7.071-6.815-6.814-13.63-13.629-20.444-20.444-4.564-4.564-11.634,2.507-7.071,7.071z"></path>
			<path d="m250.742,79.457c-6.815,6.815-13.63,13.63-20.444,20.444-4.564,4.564 2.507,11.635 7.07,7.071 6.815-6.815 13.63-13.63 20.444-20.444 4.565-4.564-2.506-11.635-7.07-7.071z"></path>
			<path d="m89.125,183.372c9.638,0 19.275,0 28.913,0 6.449,0 6.449-10 0-10-9.638,0-19.275,0-28.913,0-6.448,0-6.448,10 0,10z"></path>
			<path d="m244.016,142.128c9.638,0 19.275,0 28.913,0 6.448,0 6.448-10 0-10-9.638,0-19.275,0-28.913,0-6.449,0-6.449,10 0,10z"></path>
			<path d="m244.016,183.166c9.638,0 19.275,0 28.913,0 6.448,0 6.448-10 0-10-9.638,0-19.275,0-28.913,0-6.449,0-6.449,10 0,10z"></path>
			<path d="m154.833,74.702c0,6.393 0,12.786 0,19.179 0,6.449 10,6.449 10,0 0-6.393 0-12.786 0-19.179 0-6.449-10-6.449-10,0z"></path>
			<path d="m89.125,224.41c9.638,0 19.275,0 28.913,0 6.449,0 6.449-10 0-10-9.638,0-19.275,0-28.913,0-6.448,0-6.448,10 0,10z"></path>
			<path d="m244.016,224.205c9.638,0 19.275,0 28.913,0 6.448,0 6.448-10 0-10-9.638,0-19.275,0-28.913,0-6.449,0-6.449,10 0,10z"></path>
			<path d="m199.956,84.33c0,3.197 0,6.393 0,9.59 0,1.935 3,1.935 3,0 0-3.197 0-6.393 0-9.59 0-1.934-3-1.934-3,0z"></path>
			<path d="m103.64,138.833c4.819,0 9.638,0 14.457,0 1.935,0 1.935-3 0-3-4.819,0-9.638,0-14.457,0-1.935,0-1.935,3-0,3z"></path>
			<path d="m118.313,95.98c2.839,2.839 5.678,5.678 8.517,8.517 1.369,1.369 3.49-.752 2.121-2.121-2.839-2.839-5.678-5.678-8.517-8.517-1.369-1.369-3.49,.752-2.121,2.121z"></path>
			<path d="m242.386,92.82c-3.186,3.185-6.37,6.37-9.556,9.556-1.369,1.369 .752,3.49 2.121,2.121 3.186-3.185 6.37-6.37 9.556-9.556 1.369-1.369-.752-3.49-2.121-2.121z"></path>
			<path d="m103.64,179.872c4.819,0 9.638,0 14.457,0 1.935,0 1.935-3 0-3-4.819,0-9.638,0-14.457,0-1.935,0-1.935,3-0,3z"></path>
			<path d="m244.073,138.628c4.818,0 9.638,0 14.456,0 1.935,0 1.935-3 0-3-4.818,0-9.638,0-14.456,0-1.934,0-1.934,3 0,3z"></path>
			<path d="m244.073,179.666c4.818,0 9.638,0 14.456,0 1.935,0 1.935-3 0-3-4.818,0-9.638,0-14.456,0-1.934,0-1.934,3 0,3z"></path>
			<path d="m158.391,84.291c0,3.197 0,6.393 0,9.59 0,1.935 3,1.935 3,0 0-3.197 0-6.393 0-9.59 0-1.935-3-1.935-3,0z"></path>
			<path d="m103.64,220.91c4.819,0 9.638,0 14.457,0 1.935,0 1.935-3 0-3-4.819,0-9.638,0-14.457,0-1.935,0-1.935,3-0,3z"></path>
			<path d="m244.073,220.705c4.818,0 9.638,0 14.456,0 1.935,0 1.935-3 0-3-4.818,0-9.638,0-14.456,0-1.934,0-1.934,3 0,3z"></path>
			<path d="m196.398,74.741c0,6.393 0,12.786 0,19.179 0,6.449 10,6.449 10,0 0-6.393 0-12.786 0-19.179 0-6.449-10-6.449-10,0z"></path>
		</g>
	</svg>
</a>

Werde mal noch meine anderen Endgeräte ans laufen bringen. Dann gucke ich mal, ob mir etwas auffällt hinsichtlich Performance.

Gruß
Christoph

[loeserman]

Was ich schon mal sagen kann. Wenn ich nun meine größte Seite scrolle dann geht das sehr flüssig. Bin mir aber nicht ob es damit oder mit anderen Verbesserungen zusammenhängt. Aber das gefällt mir schonmal super gut. Muss al noch gucken, wie sich nun das Tablet im Eingangsbereich verhält, wenn ich dort wieder mit dem FullyBrowser die Seite aufrufe.

[loeserman]

Vielleicht habt ihr einen Tipp, warum folgendes nicht mehr funktioniert.
Ich arbeite gern modular und daher habe ich mir für Objekte Makros geschrieben. Seit der Umstellung funktioniert es nicht mehr, dass das Fenster als gekippt [ICON_STATUS=0] angezeigt wird. Ich vermute es hängt mit der Farbe "color_tipped" zusammen. Muss die nun anders heißen?

Das icon selbst "fts_window_1w_tilt.svg" ist auf jeden Fall vorhanden. Auch die anderen Status funktionieren.

/**
 * Displays icon of a normal window
 *
 * @param       a gad/item window icon status (example: "R04.FENSTER.OST", without ".ICON_STATUS")
 * @param       standard color for all status (example: "#ffffff") (optional)
 */
{% macro icon_normal_window(gad, standardcolor) %}
    {% import "basic.html" as basic %}
    
    {% if standardcolor == '' %}
        {% set color_closed = '#ffffff' %}
        {% set color_opened = '#ff0000' %}
        {% set color_tipped = '#icon1' %}
    {% else %}
        {% set color_closed = standardcolor %}
        {% set color_opened = standardcolor %}
        {% set color_tipped = standardcolor %}
    {% endif %}
    
    {{ basic.symbol('', gad~'.ICON_STATUS', '', ['fts_window_1w.svg', 'fts_window_1w_open.svg', 'fts_window_1w_tilt.svg'], [5,4,0], '', ['icon0', color_opened, color_tipped]) }}
{% endmacro %}

Das hier kommt bei ICON_STATUS=0 heraus

<span data-widget="basic.symbol" data-item="R13.FENSTER.ICON_STATUS" style="" data-val="5, 4, 0" data-mode="or" class="symbol" formula="VAR">
	<span data-val="5" style="display: none;">
		<svg class="icon icon0" role="img" aria-label="fts_window_1w" xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321">
			<path fill="none" stroke-width="10" d="m267.826,263.303c0,3.91-3.156,7.082-7.05,7.082l-157.885,.021c-3.894,0-7.05-3.171-7.05-7.083v-157.5c0-3.911 3.156-7.083 7.05-7.083l157.885-.021c3.894,0 7.05,3.172 7.05,7.083v157.501z"></path>
			<path d="m258.5,185.584c2.213,0 4.426,0 6.639,0 2.726,0 5-2.274 5-5s-2.274-5-5-5c-2.213,0-4.426,0-6.639,0-2.726,0-5,2.274-5,5s2.274,5 5,5z"></path>
			<path fill="none" stroke-width="10" d="m267.826,103.208c0,2.485-2.711,4.5-6.053,4.5l-159.88,.021c-3.342,0-6.052-2.015-6.052-4.5v-9c0-2.485 2.71-4.5 6.052-4.5l159.88-.021c3.342,0 6.053,2.015 6.053,4.5v9z"></path>
		</svg>
	</span><span data-val="4" style="display: none;">
		<svg class="icon" style="stroke:#ff0000; fill:#ff0000; color:#ff0000;" role="img" aria-label="fts_window_1w_open" xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321">
			<path fill="none" stroke-width="10" d="m267.826,263.303c0,3.91-3.156,7.082-7.05,7.082l-157.885,.021c-3.894,0-7.05-3.171-7.05-7.083v-157.5c0-3.911 3.156-7.083 7.05-7.083l157.885-.021c3.894,0 7.05,3.172 7.05,7.083v157.501z"></path>
			<path d="m228.5,205.584c2.213,0 4.426,0 6.639,0 2.726,0 5-2.274 5-5s-2.274-5-5-5c-2.213,0-4.426,0-6.639,0-2.726,0-5,2.274-5,5s2.274,5 5,5z"></path>
			<path fill="none" stroke-width="10" d="m267.826,103.208c0,2.485-2.711,4.5-6.053,4.5l-159.88,.021c-3.342,0-6.052-2.015-6.052-4.5v-9c0-2.485 2.71-4.5 6.052-4.5l159.88-.021c3.342,0 6.053,2.015 6.053,4.5v9z"></path>
			<path d="m232.826,280.905c-.339,3.356-18.813-.782-20.919-1.06-15.024-1.98-30.049-3.96-45.073-5.94-15.025-1.98-30.049-3.96-45.074-5.94-4.835-.638-9.671-1.275-14.507-1.912-1.456-.192-6.201-.055-6.412-2.147-.621-6.157 0-12.699 0-18.878 0-14.5 0-29 0-43.5 0-27.359 0-54.718 0-82.076 0-1.71 0-3.42 0-5.13 0-2.551 5.184-1.015 6.412-.853 11.813,1.557 23.625,3.114 35.438,4.67 27.908,3.678 55.816,7.356 83.723,11.035 1.457,.192 6.201,.055 6.412,2.147 .169,1.673 0,3.451 0,5.13 0,11.217 0,22.434 0,33.651 0,30.642 0,61.283 0,91.925 0,6.293 0,12.585 0,18.878 0,6.448 10,6.448 10,0 0-48.151 0-96.303 0-144.454 0-1.71 0-3.42 0-5.13 0-7.619-6.137-10.793-12.673-11.655-9.511-1.253-19.021-2.507-28.531-3.76-29.47-3.884-58.94-7.768-88.411-11.652-3.299-.435-6.598-.87-9.897-1.304-6.555-.864-12.473,4.9-12.473,11.38 0,6.521 0,13.042 0,19.563 0,30.705 0,61.41 0,92.115 0,11.052 0,22.104 0,33.154 0,2.023-.071,4.04 .132,6.053 .717,7.111 6.606,9.563 12.759,10.374 25.609,3.375 51.218,6.75 76.827,10.125 13.299,1.753 26.598,3.506 39.896,5.259 3.232,.426 6.465,.852 9.697,1.278 7.063,.931 12.011-4.778 12.673-11.346 .648-6.415-9.358-6.352-9.999,0z"></path>
		</svg>
	</span>
	<span data-val="0" style="display: inline;">
		<svg class="icon" style="stroke:#icon1; fill:#icon1; color:#icon1;" role="img" aria-label="fts_window_1w_tilt" xmlns="http://www.w3.org/2000/svg" viewBox="20 20 321 321">
			<g fill="none" stroke-width="10">
				<path d="m267.826,263.303c0,3.91-3.156,7.082-7.05,7.082l-157.885,.021c-3.894,0-7.05-3.171-7.05-7.083v-157.5c0-3.911 3.156-7.083 7.05-7.083l157.885-.021c3.894,0 7.05,3.172 7.05,7.083v157.501z"></path>
				<path d="m267.826,103.208c0,2.485-2.711,4.5-6.053,4.5l-159.88,.021c-3.342,0-6.052-2.015-6.052-4.5v-9c0-2.485 2.71-4.5 6.052-4.5l159.88-.021c3.342,0 6.053,2.015 6.053,4.5v9z"></path>
				<path d="m265.732,265.178c.584,2.887-1.629,5.228-4.942,5.228h-157.333c-3.313,0-6.474-2.341-7.058-5.228l-21.159-134.545c-.584-2.887 1.628-5.228 4.942-5.228h157.333c3.313,0 6.474,2.34 7.058,5.228l21.159,134.545z"></path>
			</g>
			<path d="m247.194,199.667c2.213,0 4.426,0 6.639,0 2.726,0 5-2.274 5-5s-2.274-5-5-5c-2.213,0-4.426,0-6.639,0-2.726,0-5,2.274-5,5s2.275,5 5,5z"></path>
		</svg>
	</span>
</span>

Danke euch.

[loeserman]

Oh das war einfach. Die # war zu viel. Muss folgendermaßen heißen:
{% set color_tipped = 'icon1' %}

/**
 * Displays icon of a sliding window
 * 
 * @param       a gad/item window icon status (example: "R04.FENSTER.OST", without ".ICON_STATUS") 
 * @param       standard color for all status (example: "#ffffff") (optional)
 */
{% macro icon_sliding_window(gad, standardcolor) %}
	{% import "basic.html" as basic %}
	
	{% if standardcolor == '' %}
		{% set color_closed = '#ffffff' %}
		{% set color_opened = '#ff0000' %}
		{% set color_tipped = 'icon1' %}
	{% else %}
		{% set color_closed = standardcolor %}
		{% set color_opened = standardcolor %}
		{% set color_tipped = standardcolor %}
	{% endif %}

	{{ basic.symbol('', gad~'.ICON_STATUS', '', ['fts_door_slide.svg', 'fts_door_slide_open.svg', 'fts_door_tilt.svg'], [5,4,0], '', ['icon0', color_opened, color_tipped]) }}
{% endmacro %}

[wvhn]

Interessant. Der Hashtag vor dem 'icon1' war noch nie erlaubt. Offenbar waren die früheren Versionen von smartVISU da aber großzügiger.
Wenn kein gültiger Klassenname erkannt wird, schreibt das Widget den Inhalt des Parameters 'color' in die style-Eigenschaften fill, stroke und color. Das sieht man im obigen html-Auszug. Erlaubt sind dort die html-Farbennamen (siehe ./lib/templatechecker/class.Config.php oder hier), oder die hexadezimalen RGB(A)-Werte mit Hashtag als Präfix. Eine Prüfung der Angaben findet dort nicht mehr statt.

Gruß
Wolfram

[jksd]

Hallo zusammen,

ich muss an dieser Stelle mal ein ganz großes Lob an Wolfram und sein Engagement für die smartvisu aussprechen.

Mit der letzten Performance-Optimierung in der V3.2.c vom develop startet meine sehr komplexe Visu mit jetzt 15s anstatt 22s zuvor am langsamen 24" Android-Panel (fronthem/fhem backend). Ein weiterer großer Schritt nach den ersten Performance-Optimierungen im Frühjahr.

Vielen vielen Dank, auch für das schnelle direkte Feedback bei Anpassung der eigenen SVGs. Ich musste für die eigenen Icons auch das css-Styling etwas anpassen. Das war es aber wert.

Viele Grüße
Jörk

[loeserman]

Moin zusammen,
also ich möchte mich gern meinem Vorredner anschließen. Die smartVISU als auch smarthomeNG sind wirklich klasse. Das neue Iconhandling bringt auch nochmal einen weiteren Schub. Bisher hat sich die Seite auch schnell aufgebaut und die Status der einzelnen Widgets sind dann der Reihe nach angezeigt worden. Mit dem letzten Update was Wolfram eingebaut hat, geht die Seite schnell auf und die Status kommen alle gleichzeitig.

Echt klasse Arbeit!

Konnte ansonsten noch keine Probleme oder so finden bezüglich des neuen Icon Handlings.

Gruß
Christoph