USE-SYMBOLS (LMU-Intern Modul )

src/app/shared/components/use-symbols/templates

Demo Section

Each variation will be presented in the following section.

Default Symbol (Font-Size 24px, Horizontal)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Hier steht dann noch Näheres zu der Iconleiste (Optional)
chair_alt120 Sitzplätze
people120 Sitzplätze (Uni Wien)
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
event_available
access_timePlatzreservierung (Uni Wien)
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
support_agent
ac_unit
live_help
key
key_off
dining
qr_code_scannerBuchscanner Stockwerk 2 (Material icon)
groupsMaterial Icons Gruppenräume
diversity_3Gruppenarbeitsplätze (Uni Wien)

Default Symbol (Font-Size 24px, Horizontal, großer Abstand)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit größerem Abstand

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.
chair_alt120 Sitzplätze
people120 Sitzplätze (Uni Wien)
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
event_available
access_timePlatzreservierung (Uni Wien)
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
support_agent
ac_unit
live_help
key
key_off
dining
qr_code_scannerBuchscanner Stockwerk 2 (Material icon)
groupsMaterial Icons Gruppenräume
diversity_3Gruppenarbeitsplätze (Uni Wien)

Default Symbol (Font-Size 24px, Horizontal, großer Abstand, Aurichtung zentral)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit zentrierter Darstellung und größerem Abstand

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.
chair_alt120 Sitzplätze
people120 Sitzplätze (Uni Wien)
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
event_available
access_timePlatzreservierung (Uni Wien)
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
support_agent
ac_unit
live_help
key
key_off
dining
qr_code_scannerBuchscanner Stockwerk 2 (Material icon)
groupsMaterial Icons Gruppenräume
diversity_3Gruppenarbeitsplätze (Uni Wien)

Default Symbol (Font-Size 24px, Horizontal, Aurichtung zentral)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit horizontaler Anordnung und zentrierter Darstellung

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.
chair_alt120 Sitzplätze
people120 Sitzplätze (Uni Wien)
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
event_available
access_timePlatzreservierung (Uni Wien)
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
support_agent
ac_unit
live_help
key
key_off
dining
qr_code_scannerBuchscanner Stockwerk 2 (Material icon)
groupsMaterial Icons Gruppenräume
diversity_3Gruppenarbeitsplätze (Uni Wien)

Default Symbol Font-Size 24px Vertikal

Legende

chair_altAnzahl verfügbarer Sitzplätze im Raum (MS / MI)
peopleAnzahl verfügbarer Sitzplätze im Raum (Lösung Uni Wien, MS / MI)
deskAnzahl verfügbarer Tische im Raum (MS / MI)
accessibleBehindertengerechte Benutzung möglich (MS / MI)
scannerScannernutzung möglich (MS / MI)
family_restroom Mutter-Kind-Raum (MS / MI)
weekendSofa/Lounge (auch Uni Wien, MS / MI)
calendar_monthPlatzreservierung (MS / MI)
event_availablePlatzreservierung (MS / MI)
access_timePlatzreservierung (Uni Wien, MS / MI)
meeting_roomEinzelcarrels (MS / MI)
fastfoodCafé-/Snack-, getränkeautomat (MS / MI)
local_cafe Café-/Snack-, Getränkeautomat (MS / MI)
diningCafé-/Snack-, Getränkeautomat (MS / MI)
desktop_windowsRecherche-P (MS / MI)
credit_cardZugang mit LMU-Card (MS / MI)
video_chataktive Teilnahme Videokonferenz (MS / MI)
support_agentaktive Teilnahme Videokonferenz (MS / MI)
ac_unitKontrollierte Temperierung (in Uni Wien Klimaanlage, MS / MI)
keyMietschließfach MS / MI)
key_offKein Mietschließfach (MS / MI)
contact_supportSupport im Zeitraum von 9.00 - 12:00 Uhr (MS / MI)
live_helpSupport (MS / MI)

Default Symbol Font-Size 24px mit Iconinfo BOLD

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Hier steht dann noch Näheres zu der Iconleiste (Optional)
printZusatztext zum Icon
homeZusatztext zum Icon
settings
check
boltZusatztext zum Icon

Default mit Symbol Font-Size L

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Hier steht dann noch Näheres zu der Iconleiste (Optional)
chair_alt120 Sitzplätze
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
ac_unit
printZusatztext zum Icon
homeZusatztext zum Icon
settings
check
boltZusatztext zum Icon

Default mit Symbol (Font-Size L, horizontal, großer Abstand)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.
chair_alt120 Sitzplätze
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
ac_unit
printZusatztext zum Icon
homeZusatztext zum Icon
settings
check
boltZusatztext zum Icon

Default mit Symbol (Font-Size L, horizontal, großer Abstand, Ausrichtung Zentral)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.
chair_alt120 Sitzplätze
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
ac_unit
printZusatztext zum Icon
homeZusatztext zum Icon
settings
check
boltZusatztext zum Icon

Default mit Symbol Font-Size XL

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Hier steht dann noch Näheres zu der Iconleiste (Optional)

Default mit Symbol(Font-Size XL, horizontal, großer Abstand)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.

Default mit Symbol(Font-Size XL, horizontal, großer Abstand, Ausrichtung horizontal Zentral)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.

Default mit Symbol Font-Size XL, Schrift Bold und Text unter dem Pictogramm


Default mit Symbol (Font-Size XL, Horizontal, Schrift Bold, Text unter dem Pictogramm, Abstand groß)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.

Default mit Symbol (Font-Size XL, Horizontal, Schrift Bold, Text unter dem Pictogramm, Alignment Center, Abstand groß)

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage

Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.

RTE

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite

Hier steht dann noch Näheres zu der Iconleiste (Optional)

RTE

Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite (Horizontal, mit Abstand, zentriert)

Hier steht dann noch Näheres zu der Iconleiste (Optional)
people120 Sitzplätze (Uni Wien)
desk30 Tische
accessibleBehindertengerecht
scanner
family_restroom
weekend
calendar_month
event_available
access_timePlatzreservierung (Uni Wien)
meeting_room
local_cafe
desktop_windows
credit_card
video_chat
support_agent
ac_unit
live_help
key
key_off
dining

RTEVertical

Iconleiste untereinander mit mehreren Symbolen aus der Font Material Symbols in Detailseite

Hier steht dann noch Näheres zu der Iconleiste (Optional)

Readme

use-symbols (component)

Description

This blueprint is based on the blueprint of Veams. The Feature is to enables the creation of Google material symbols in a paragraph template icon bar.


Requirements

  • [@veams/assets/fonts] Google Font Material Symbols (material-symbols-v2-latin-regular) als File mit Format (woff, woff2, eot, ttf, svg)

Fields

use-symbols.hbs

Settings

Parameter Type Default Description
settings.useSymbolsClasses Boolean false Modifier classes for component: For the Font Material Symbol:‘fsizeS’, ‘fsizeL’, ‘fsizeXL’ define different Sizes of the Symbols
settings.useSymbolsContextClass String 'default' Context class of component: ‘default’ for Landingpage integration , ‘rte’ for detailpage integration
settings.useAlignmentClasses String 'is-alignment-center' or not existing Optional Parameter. If this parameter is set: Context class of component: ‘is-alignment-center’ for horizontal centering , default is left orientated ‘is-alignment-left’
settings.useDistanceClasses String 'is-more-distance' or not existing Optional Parameter. If this parameter is set: Context class of component: ‘is-more-distance’ The distance between the icons is increasing depending on the Font-Size

Content

Parameter Type Description
content.headline String The Headline for the Icon/Symbol area (optional)
content.text String The Infotext for the Icon/Symbol area (optional)
content.icons Array Has Objects for the Icon/Symbol

use-symbols__iconarea.hbs

Settings

Parameter Type Default Description

Content

Parameter Type Description
content.iconName String Enthält den spezifischen Iconname für das ICON aus der Font Material Symbols (https://fonts.google.com/icons?hl=de). Dient zum Anzeigen des gewünschten Icons (requird)
content.iconTitle String Title für das ICon zur besseren behindertengerechten Lösung. Title beschreibt das Symbol (required)
content.iconInfo String Zusatzinfo zum Symbol. Erscheint neben dem Icon und kann als Ergänzung oder als Legendentext verwendet werden. (optional)
content."linkHref String Url zur Verlinkung des Icons. Wenn diese gesetzt ist wird um das Icon ein Link-Tag gesetzt. (optional)
content.iconLinkTitle String Title des Link-Tags (optional)

SASS

Variables

There are multiple variables which you can change:

Variable Value Description

Modifier Classes

There are modifier classes you can add to use-Symbols:

| Modifier | Description | |:— | :—: |‚ | fsizeL | to show a large symbol (font-size: 3.6rem) (standrad is 2.4rem) | | fsizeXL | to show a xlarge symbol (font-size: 4.8rem) (standrad is 2.4rem) | | is-vertical | show the icons in a vertical line (standard is a horizontal line) |

There are modifier classes you can add to use-Symbols_iconarea:

| Modifier | Description | |:— | :—: |‚ | is-font-bold | show the iconInfotext in Bold | | is-text-under | show the iconInfotext under teh pictogram | | is-alignment-center | center the Icons by a horizontal view | | is-more-distance | the distance between the icons is increasing (Vertical and horizontal) |

Templates

use-symbols.hbs

<div class="c-use-symbols{{#if
		settings.useSymbolsContextClass}}--{{settings.useSymbolsContextClass}}{{else}}--default{{/if}}{{#if
		settings.useSymbolsClasses}} {{settings.useSymbolsClasses}}{{/if}}"
     data-css="c-use-symbols">
	 {{#if content.headline}}
		<h2 class="use-symbols__headline">{{content.headline}}</h2>
	{{/if}}
	 {{#if content.text}}
		<div class="use-symbols__text">{{content.text}}</div>
	{{/if}}
	<div class="use-symbols__iconarea{{#if settings.useAlignmentClasses}} {{settings.useAlignmentClasses}}{{else}} is-alignment-left{{/if}}{{#if settings.useDistanceClasses}} {{settings.useDistanceClasses}}{{/if}}">
	{{#each content.icons}}
		{{> use-symbols__iconarea}}
	{{/each}}
	</div>
</div>

use-symbols__iconarea.hbs

{{#if content.iconName}}
	<div class="use-symbols__one-icon {{#if	settings.useSymbolsOneIconClass}} {{settings.useSymbolsOneIconClass}}{{/if}}">{{#if content.linkHref}}<a href="{{content.linkHref}}" class="use-symbols__icon-link" {{#if content.iconLinkTitle}}title="{{content.iconLinkTitle}}"{{/if}} target="_blank">{{/if}}<span class="use-symbols__material-icons"  {{#if content.iconTitle}}title="{{content.iconTitle}}"{{/if}}>{{content.iconName}}</span>{{#if content.iconInfo}}<span class="use-symbols__material-iconinfo">{{content.iconInfo}}</span>{{/if}}{{#if content.linkHref}}</a>{{/if}}</div>
{{/if}}


Data File

use-symbols.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default Symbol (Font-Size 24px, Horizontal)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": false
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze"
						}
					},
					{
						"content": {
							"iconName": "people",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "event_available",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "access_time",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "support_agent",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "contact_support",
							"iconTitle": "Symbol Support",
							"iconInfo": "",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "live_help",
							"iconTitle": "Symbol Support",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key",
							"iconTitle": "Symbol Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key_off",
							"iconTitle": "Symbol Kein Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "dining",
							"iconTitle": "Symbol Essen",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "qr_code_scanner",
							"iconTitle": "Symbol Buchscanner",
							"iconInfo":"Buchscanner Stockwerk 2 (Material icon)"
						}
					},
					{
						"content": {
							"iconName": "groups",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Material Icons Gruppenräume"
						}
					},
					{
						"content": {
							"iconName": "diversity_3",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Gruppenarbeitsplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "blind",
							"iconTitle": "Symbol Sehbehindertensitzplatz",
							"iconInfo":"Sehbehindertenarbeitsplatz",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_w_gr_abstand": {
			"docs": {
				"variationName": "Default Symbol (Font-Size 24px, Horizontal, großer Abstand)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": false,
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit größerem Abstand",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze"
						}
					},
					{
						"content": {
							"iconName": "people",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "event_available",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "access_time",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "support_agent",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "contact_support",
							"iconTitle": "Symbol Support",
							"iconInfo": "",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "live_help",
							"iconTitle": "Symbol Support",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key",
							"iconTitle": "Symbol Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key_off",
							"iconTitle": "Symbol Kein Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "dining",
							"iconTitle": "Symbol Essen",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "qr_code_scanner",
							"iconTitle": "Symbol Buchscanner",
							"iconInfo":"Buchscanner Stockwerk 2 (Material icon)"
						}
					},
					{
						"content": {
							"iconName": "groups",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Material Icons Gruppenräume"
						}
					},
					{
						"content": {
							"iconName": "diversity_3",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Gruppenarbeitsplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "blind",
							"iconTitle": "Symbol Sehbehindertensitzplatz",
							"iconInfo":"Sehbehindertenarbeitsplatz",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_w_gr_abstand_ausrichtung_zentral": {
			"docs": {
				"variationName": "Default Symbol (Font-Size 24px, Horizontal, großer Abstand, Aurichtung zentral)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": false,
				"useAlignmentClasses": "is-alignment-center",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit zentrierter Darstellung und größerem Abstand",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze"
						}
					},
					{
						"content": {
							"iconName": "people",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "event_available",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "access_time",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "support_agent",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "contact_support",
							"iconTitle": "Symbol Support",
							"iconInfo": "",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "live_help",
							"iconTitle": "Symbol Support",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key",
							"iconTitle": "Symbol Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key_off",
							"iconTitle": "Symbol Kein Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "dining",
							"iconTitle": "Symbol Essen",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "qr_code_scanner",
							"iconTitle": "Symbol Buchscanner",
							"iconInfo":"Buchscanner Stockwerk 2 (Material icon)"
						}
					},
					{
						"content": {
							"iconName": "groups",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Material Icons Gruppenräume"
						}
					},
					{
						"content": {
							"iconName": "diversity_3",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Gruppenarbeitsplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "blind",
							"iconTitle": "Symbol Sehbehindertensitzplatz",
							"iconInfo":"Sehbehindertenarbeitsplatz",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_w_ausrichtung_zentral": {
			"docs": {
				"variationName": "Default Symbol (Font-Size 24px, Horizontal, Aurichtung zentral)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": false,
				"useAlignmentClasses": "is-alignment-center"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit horizontaler Anordnung und zentrierter Darstellung",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze"
						}
					},
					{
						"content": {
							"iconName": "people",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "event_available",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "access_time",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "support_agent",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "contact_support",
							"iconTitle": "Symbol Support",
							"iconInfo": "",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "live_help",
							"iconTitle": "Symbol Support",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key",
							"iconTitle": "Symbol Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key_off",
							"iconTitle": "Symbol Kein Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "dining",
							"iconTitle": "Symbol Essen",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "qr_code_scanner",
							"iconTitle": "Symbol Buchscanner",
							"iconInfo":"Buchscanner Stockwerk 2 (Material icon)"
						}
					},
					{
						"content": {
							"iconName": "groups",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Material Icons Gruppenräume"
						}
					},
					{
						"content": {
							"iconName": "diversity_3",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Gruppenarbeitsplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "blind",
							"iconTitle": "Symbol Sehbehindertensitzplatz",
							"iconInfo":"Sehbehindertenarbeitsplatz",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"defaultvertikal": {
			"docs": {
				"variationName": "Default Symbol Font-Size 24px Vertikal"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "is-vertical"
			},
			"content": {
				"headline": "Legende",
				"text":"",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Sitzplätze",
							"iconInfo": "Anzahl verfügbarer Sitzplätze im Raum (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "people",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "Anzahl verfügbarer Sitzplätze im Raum (Lösung Uni Wien, MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Anzahl Tische",
							"iconInfo": "Anzahl verfügbarer Tische im Raum (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerechte Benutzung möglich (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": "Scannernutzung möglich (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "groups",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Gruppenräume (MS / MI)",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "diversity_3",
							"iconTitle": "Symbol Gruppenräume",
							"iconInfo":"Gruppenarbeitsplätze (Uni Wien, MS / MI)",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": " Mutter-Kind-Raum (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": "Sofa/Lounge (auch Uni Wien, MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "event_available",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "access_time",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (Uni Wien, MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": "Einzelcarrels (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "fastfood",
							"iconTitle": "Symbol Café-/Snack-, Getränkeautomat",
							"iconInfo": "Café-/Snack-, getränkeautomat (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Snack-, Getränkeautomat",
							"iconInfo": " Café-/Snack-, Getränkeautomat (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "dining",
							"iconTitle": "Symbol Café-/Snack-, Getränkeautomat",
							"iconInfo": "Café-/Snack-, Getränkeautomat (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "blind",
							"iconTitle": "Symbol Sehbehindertensitzplatz",
							"iconInfo":"Sehbehindertenarbeitsplatz (MS / MI)",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": "Recherche-P (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": "Zugang mit LMU-Card (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": "aktive Teilnahme Videokonferenz (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "support_agent",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": "aktive Teilnahme Videokonferenz (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": "Kontrollierte Temperierung (in Uni Wien Klimaanlage, MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "key",
							"iconTitle": "Symbol Miet-Schließfach",
							"iconInfo": "Mietschließfach MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "key_off",
							"iconTitle": "Symbol Kein Miet-Schließfach",
							"iconInfo": "Kein Mietschließfach (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "contact_support",
							"iconTitle": "Symbol Support",
							"iconInfo": "Support im Zeitraum von 9.00 - 12:00 Uhr (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "live_help",
							"iconTitle": "Symbol Support",
							"iconInfo": "Support (MS / MI)"
						}
					},
					{
						"content": {
							"iconName": "qr_code_scanner",
							"iconTitle": "Symbol Buchscanner",
							"iconInfo":"Selbstverbucher (MS / MI)",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},"defaultbold": {
			"docs": {
				"variationName": "Default Symbol Font-Size 24px mit Iconinfo BOLD"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": false
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
				"icons": [
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "print",
							"iconTitle": "Symbol Drucker",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "home",
							"iconTitle": "Symbol Haus als Home",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "settings",
							"iconTitle": "Symbol Zahnrad als Settings"
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "check",
							"iconTitle": "Symbol Check als Haken"
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "bolt",
							"iconTitle": "Symbol Bolt als Blitz",
							"iconInfo": "Zusatztext zum Icon"
						}
					}
				]
			}
		},
		"default_fontsize_L": {
			"docs": {
				"variationName": "Default mit Symbol Font-Size L"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeL"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Sitzplätze",
							"iconInfo": "120 Sitzplätze"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "print",
							"iconTitle": "Symbol Drucker",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"content": {
							"iconName": "home",
							"iconTitle": "Symbol Haus als Home",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"content": {
							"iconName": "settings",
							"iconTitle": "Symbol Zahnrad als Settings"
						}
					},
					{
						"content": {
							"iconName": "check",
							"iconTitle": "Symbol Check als Haken"
						}
					},
					{
						"content": {
							"iconName": "bolt",
							"iconTitle": "Symbol Bolt als Blitz",
							"iconInfo": "Zusatztext zum Icon"
						}
					}
				]
			}
		},
		"fontsize_L_mit_gr_Abstand": {
			"docs": {
				"variationName": "Default mit Symbol (Font-Size L, horizontal, großer Abstand)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeL",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Sitzplätze",
							"iconInfo": "120 Sitzplätze"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "print",
							"iconTitle": "Symbol Drucker",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"content": {
							"iconName": "home",
							"iconTitle": "Symbol Haus als Home",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"content": {
							"iconName": "settings",
							"iconTitle": "Symbol Zahnrad als Settings"
						}
					},
					{
						"content": {
							"iconName": "check",
							"iconTitle": "Symbol Check als Haken"
						}
					},
					{
						"content": {
							"iconName": "bolt",
							"iconTitle": "Symbol Bolt als Blitz",
							"iconInfo": "Zusatztext zum Icon"
						}
					}
				]
			}
		},
		"fontsize_L_mit_gr_Abstand_und_Aurichtung_zentral": {
			"docs": {
				"variationName": "Default mit Symbol (Font-Size L, horizontal, großer Abstand, Ausrichtung Zentral)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeL",
				"useAlignmentClasses": "is-alignment-center",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"content": {
							"iconName": "chair_alt",
							"iconTitle": "Symbol Sitzplätze",
							"iconInfo": "120 Sitzplätze"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "print",
							"iconTitle": "Symbol Drucker",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"content": {
							"iconName": "home",
							"iconTitle": "Symbol Haus als Home",
							"iconInfo": "Zusatztext zum Icon"
						}
					},
					{
						"content": {
							"iconName": "settings",
							"iconTitle": "Symbol Zahnrad als Settings"
						}
					},
					{
						"content": {
							"iconName": "check",
							"iconTitle": "Symbol Check als Haken"
						}
					},
					{
						"content": {
							"iconName": "bolt",
							"iconTitle": "Symbol Bolt als Blitz",
							"iconInfo": "Zusatztext zum Icon"
						}
					}
				]
			}
		},
		"default_fontsize_XL": {
			"docs": {
				"variationName": "Default mit Symbol Font-Size XL"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeXL"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
				"icons": [
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "person",
							"iconTitle": "Pictogramm für Benutzerkonto",
							"iconInfo": "Benutzerkonto",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "lock",
							"iconTitle": "Pictogramm für E-Medien-Login",
							"iconInfo": "E-Medien-Login",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "access_time",
							"iconTitle": "Pictogramm für Öffnungszeiten",
							"iconInfo": "Öffnungszeiten",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "event_available",
							"iconTitle": "Pictogramm für Leseplatzreservierung",
							"iconInfo": "Leseplatzreservierung",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "library_books",
							"iconTitle": "Pictogramm für OPAC Online Katalog",
							"iconInfo": "OPAC Online Katalog",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "storage",
							"iconTitle": "Pictogramm für Forschungsdatenmanagement",
							"iconInfo": "Forschungsdatenmanagement",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "live_help",
							"iconTitle": "Pictogramm für FAQ",
							"iconInfo": "FAQ",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_fontsize_XL_mit_gr_Abstand": {
			"docs": {
				"variationName": "Default mit Symbol(Font-Size XL, horizontal, großer Abstand)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeXL",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "person",
							"iconTitle": "Pictogramm für Benutzerkonto",
							"iconInfo": "Benutzerkonto",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "lock",
							"iconTitle": "Pictogramm für E-Medien-Login",
							"iconInfo": "E-Medien-Login",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "access_time",
							"iconTitle": "Pictogramm für Öffnungszeiten",
							"iconInfo": "Öffnungszeiten",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "event_available",
							"iconTitle": "Pictogramm für Leseplatzreservierung",
							"iconInfo": "Leseplatzreservierung",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "library_books",
							"iconTitle": "Pictogramm für OPAC Online Katalog",
							"iconInfo": "OPAC Online Katalog",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "storage",
							"iconTitle": "Pictogramm für Forschungsdatenmanagement",
							"iconInfo": "Forschungsdatenmanagement",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "live_help",
							"iconTitle": "Pictogramm für FAQ",
							"iconInfo": "FAQ",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_fontsize_XL_mit_gr_Abstand_und_Aurichtung_zentral": {
			"docs": {
				"variationName": "Default mit Symbol(Font-Size XL, horizontal, großer Abstand, Ausrichtung horizontal Zentral)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeXL",
				"useAlignmentClasses": "is-alignment-center",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "person",
							"iconTitle": "Pictogramm für Benutzerkonto",
							"iconInfo": "Benutzerkonto",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "lock",
							"iconTitle": "Pictogramm für E-Medien-Login",
							"iconInfo": "E-Medien-Login",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "access_time",
							"iconTitle": "Pictogramm für Öffnungszeiten",
							"iconInfo": "Öffnungszeiten",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "event_available",
							"iconTitle": "Pictogramm für Leseplatzreservierung",
							"iconInfo": "Leseplatzreservierung",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "library_books",
							"iconTitle": "Pictogramm für OPAC Online Katalog",
							"iconInfo": "OPAC Online Katalog",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "storage",
							"iconTitle": "Pictogramm für Forschungsdatenmanagement",
							"iconInfo": "Forschungsdatenmanagement",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold"
						},
						"content": {
							"iconName": "live_help",
							"iconTitle": "Pictogramm für FAQ",
							"iconInfo": "FAQ",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_fontsize_XL_text_under": {
			"docs": {
				"variationName": "Default mit Symbol Font-Size XL, Schrift Bold und Text unter dem Pictogramm"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeXL"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Hier dann Infos",
				"icons": [
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "person",
							"iconTitle": "Pictogramm für Benutzerkonto",
							"iconInfo": "Benutzerkonto",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "lock",
							"iconTitle": "Pictogramm für E-Medien-Login",
							"iconInfo": "E-Medien-Login",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "access_time",
							"iconTitle": "Pictogramm für Öffnungszeiten",
							"iconInfo": "Öffnungszeiten",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "event_available",
							"iconTitle": "Pictogramm für Leseplatzreservierung",
							"iconInfo": "Leseplatzreservierung",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "library_books",
							"iconTitle": "Pictogramm für OPAC Online Katalog",
							"iconInfo": "OPAC Online Katalog",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "storage",
							"iconTitle": "Pictogramm für Forschungsdatenmanagement",
							"iconInfo": "Forschungsdatenmanagement",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "live_help",
							"iconTitle": "Pictogramm für FAQ",
							"iconInfo": "FAQ",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_fontsize_XL_text_under_Abstand_gross": {
			"docs": {
				"variationName": "Default mit Symbol (Font-Size XL, Horizontal, Schrift Bold, Text unter dem Pictogramm, Abstand groß)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeXL",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "person",
							"iconTitle": "Pictogramm für Benutzerkonto",
							"iconInfo": "Benutzerkonto",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "lock",
							"iconTitle": "Pictogramm für E-Medien-Login",
							"iconInfo": "E-Medien-Login",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "access_time",
							"iconTitle": "Pictogramm für Öffnungszeiten",
							"iconInfo": "Öffnungszeiten",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "event_available",
							"iconTitle": "Pictogramm für Leseplatzreservierung",
							"iconInfo": "Leseplatzreservierung",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "library_books",
							"iconTitle": "Pictogramm für OPAC Online Katalog",
							"iconInfo": "OPAC Online Katalog",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "storage",
							"iconTitle": "Pictogramm für Forschungsdatenmanagement",
							"iconInfo": "Forschungsdatenmanagement",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "live_help",
							"iconTitle": "Pictogramm für FAQ",
							"iconInfo": "FAQ",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"default_fontsize_XL_text_under_Abstand_gross_Ausrichtung_zentral": {
			"docs": {
				"variationName": "Default mit Symbol (Font-Size XL, Horizontal, Schrift Bold, Text unter dem Pictogramm, Alignment Center, Abstand groß)"
			},
			"settings": {
				"useSymbolsContextClass": "default",
				"useSymbolsClasses": "fsizeXL",
				"useAlignmentClasses": "is-alignment-center",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage",
				"text":"Um den Abstand zu vergrößern muss das Attribute 'useDistanceClasses' mit dem String 'is-more-distance' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-more-distance' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Um die Pictogramme zu zentrieren muss das Attribute 'useAlignmentClasses' mit dem String 'is-alignment-center' in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse 'is-alignment-center' für das DIV-Element mit der Klasse 'use-symbols__iconarea' ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.",
				"icons": [
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "person",
							"iconTitle": "Pictogramm für Benutzerkonto",
							"iconInfo": "Benutzerkonto",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "lock",
							"iconTitle": "Pictogramm für E-Medien-Login",
							"iconInfo": "E-Medien-Login",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "access_time",
							"iconTitle": "Pictogramm für Öffnungszeiten",
							"iconInfo": "Öffnungszeiten",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "event_available",
							"iconTitle": "Pictogramm für Leseplatzreservierung",
							"iconInfo": "Leseplatzreservierung",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "library_books",
							"iconTitle": "Pictogramm für OPAC Online Katalog",
							"iconInfo": "OPAC Online Katalog",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "storage",
							"iconTitle": "Pictogramm für Forschungsdatenmanagement",
							"iconInfo": "Forschungsdatenmanagement",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"settings": {
							"useSymbolsOneIconClass": "is-font-bold is-text-under"
						},
						"content": {
							"iconName": "live_help",
							"iconTitle": "Pictogramm für FAQ",
							"iconInfo": "FAQ",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"rte": {
			"docs": {
				"variationName": "RTE"
			},
			"settings": {
				"useSymbolsContextClass": "rte",
				"useSymbolsClasses": false
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite",
				"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
				"icons": [
					{
						"content": {
							"iconName": "print",
							"iconTitle": "Symbol Drucker",
							"iconInfo": "Zusatztext zum Icon",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "home",
							"iconTitle": "Symbol Haus als Home",
							"iconInfo": "Zusatztext zum Icon",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		},
		"rtewithall": {
			"docs": {
				"variationName": "RTE"
			},
			"settings": {
				"useSymbolsContextClass": "rte",
				"useSymbolsClasses": false,
				"useAlignmentClasses": "is-alignment-center",
				"useDistanceClasses": "is-more-distance"
			},
			"content": {
				"headline": "Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite (Horizontal, mit Abstand, zentriert)",
				"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
				"icons": [
					{
						"content": {
							"iconName": "print",
							"iconTitle": "Symbol Drucker",
							"iconInfo": "Zusatztext zum Icon",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "home",
							"iconTitle": "Symbol Haus als Home",
							"iconInfo": "Zusatztext zum Icon",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "people",
							"iconTitle": "Symbol Anzahl Sitzplätze",
							"iconInfo": "120 Sitzplätze (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "desk",
							"iconTitle": "Symbol Tisch",
							"iconInfo": "30 Tische"
						}
					},
					{
						"content": {
							"iconName": "accessible",
							"iconTitle": "Symbol Rollstuhlfahrer für Behindertengerechte Nutzung",
							"iconInfo": "Behindertengerecht"
						}
					},
					{
						"content": {
							"iconName": "scanner",
							"iconTitle": "Symbol Scanner",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "family_restroom",
							"iconTitle": "Symbol Mutter-Kind-Raum",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "weekend",
							"iconTitle": "Symbol Sofa/Lounge",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "calendar_month",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "event_available",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "access_time",
							"iconTitle": "Symbol Platzreservierung",
							"iconInfo": "Platzreservierung (Uni Wien)"
						}
					},
					{
						"content": {
							"iconName": "meeting_room",
							"iconTitle": "Symbol Einzelcarrels",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "local_cafe",
							"iconTitle": "Symbol Café-/Getränkeautomat",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "desktop_windows",
							"iconTitle": "Symbol Recherche-PC",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "credit_card",
							"iconTitle": "Symbol Zugang mit LMU-Card ",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "video_chat",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "support_agent",
							"iconTitle": "Symbol aktive Teilnahme Videokonferenz",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "ac_unit",
							"iconTitle": "Symbol Kontrollierte Temperierung",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "contact_support",
							"iconTitle": "Symbol Support",
							"iconInfo": "",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "live_help",
							"iconTitle": "Symbol Support",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key",
							"iconTitle": "Symbol Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "key_off",
							"iconTitle": "Symbol Kein Miet-Schließfach",
							"iconInfo": ""
						}
					},
					{
						"content": {
							"iconName": "dining",
							"iconTitle": "Symbol Essen",
							"iconInfo": ""
						}
					}
				]
			}
		},
		"rtevertical": {
			"docs": {
				"variationName": "RTEVertical"
			},
			"settings": {
				"useSymbolsContextClass": "rte",
				"useSymbolsClasses": "is-vertical"
			},
			"content": {
				"headline": "Iconleiste untereinander mit mehreren Symbolen aus der Font Material Symbols in Detailseite",
				"text":"Hier steht dann noch Näheres zu der Iconleiste (Optional)",
				"icons": [
					{
						"content": {
							"iconName": "print",
							"iconTitle": "Symbol Drucker",
							"iconInfo": "Zusatztext zum Icon",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					},
					{
						"content": {
							"iconName": "home",
							"iconTitle": "Symbol Haus als Home",
							"iconInfo": "Zusatztext zum Icon",
							"linkHref": "#",
							"iconLinkTitle": "Link auf ..."
						}
					}
				]
			}
		}
	}
}

Styles

use-symbols.scss

/* ===================================================
component: use-symbols (Enables the creation of Google material symbols in a paragraph template icon bar)
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-use-symbols"] {


	.use-symbols__headline {
			@include headline-h2-styles();
	}

	.use-symbols__text {
		font-family: $font-regular;
		color: $color-dark;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .025rem;
		margin-bottom: 15px;

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			line-height: (24/16);
			letter-spacing: .025rem;
			margin-bottom: 20px;
		}
	}

	.use-symbols__iconarea {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		gap: 20px 12px;

		&.is-alignment-left {
			justify-content: flex-start;
		}

		&.is-alignment-center {
			justify-content: space-evenly;
		}

		&.is-more-distance {
				gap: 22px 22px;
		}


	}



	.use-symbols__material-icons {
		font-family: $font-icon;
		font-weight: normal;
		font-style: normal;
		font-size: 2.4rem;  /* Preferred icon size */
		display: inline-block;
		line-height: 1;
		text-transform: none;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		color: $color-dark;

		/* Support for all WebKit browsers. */
		-webkit-font-smoothing: antialiased;
		/* Support for Safari and Chrome. */
		text-rendering: optimizeLegibility;

		/* Support for Firefox. */
		-moz-osx-font-smoothing: grayscale;

		/* Support for IE. */
		font-feature-settings: 'liga';

	}

	.use-symbols__material-iconinfo {
		font-family: $font-regular;
		display: block;
		padding: 1px 0px 1px 6px;
	}

	.use-symbols__icon-link {
		display: flex; /* Setzt den Container als Flex-Container */
  		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
		color: $color-green;
		border: none;
		color: $color-green;
		text-decoration: none;

		.use-symbols__material-icons {
			color: $color-green;
		}


		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-dark;

			.use-symbols__material-icons {
				color: $color-dark;
			}
		}

		&.a11y-focus-key {
			@include a11y-focus-key();
		}

		@include print() {
				text-decoration: underline !important;
			}
	}

	&.fsizeL {

		.use-symbols__iconarea {
			gap: 20px 18px;

			&.is-more-distance {
				gap: 23px 26px;
			}
		}

		.use-symbols__material-icons {
			font-size: 3.6rem;
		}
	}

	&.fsizeXL {

		.use-symbols__iconarea {
			gap: 22px 26px;

			&.is-more-distance {
				gap: 32px 40px;
			}
		}
		.use-symbols__material-icons {
			font-size: 4.8rem;
		}

	}

	&.is-vertical {
		.use-symbols__iconarea {
			flex-direction: column;
			width: 100%;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 12px 12px;
		}
		.use-symbols__one-icon {
			padding-left: 0px;
			padding-right: 0px;
		}

	}



	.use-symbols__one-icon {
		display: flex; /* Setzt den Container als Flex-Container */
  		align-items: center;
		flex-direction: row;
		justify-content: flex-start;
		//padding: 0px 20px 12px 0px;

		&.is-text-under{

			flex-direction: column;
			justify-content: center;

			.use-symbols__icon-link {
				flex-direction: column;
				justify-content: center;
			}
		}

		&.is-font-bold {
			.use-symbols__material-iconinfo {
				font-family: $font-bold;
			}
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-use-symbols--default {
	margin: 0 auto 60px;
	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}
}

.c-use-symbols--rte {
	margin-bottom: 25px;

	@include bp($bp-desktop-m) {
		margin-bottom: 30px;
	}

	.use-symbols__headline {
		width: 100%;
		flex: 0 0 100%;
		margin-left: 0px;
	}
}



HTML Output

Default Symbol (Font-Size 24px, Horizontal)

<div class="c-use-symbols--default" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">120 Sitzplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Essen">dining</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Buchscanner">qr_code_scanner</span><span class="use-symbols__material-iconinfo">Buchscanner Stockwerk 2 (Material icon)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">groups</span><span class="use-symbols__material-iconinfo">Material Icons Gruppenräume</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">diversity_3</span><span class="use-symbols__material-iconinfo">Gruppenarbeitsplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Sehbehindertensitzplatz">blind</span><span class="use-symbols__material-iconinfo">Sehbehindertenarbeitsplatz</span></a></div>
	</div>
</div>

Default Symbol (Font-Size 24px, Horizontal, großer Abstand)

<div class="c-use-symbols--default" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit größerem Abstand</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-left is-more-distance">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">120 Sitzplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Essen">dining</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Buchscanner">qr_code_scanner</span><span class="use-symbols__material-iconinfo">Buchscanner Stockwerk 2 (Material icon)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">groups</span><span class="use-symbols__material-iconinfo">Material Icons Gruppenräume</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">diversity_3</span><span class="use-symbols__material-iconinfo">Gruppenarbeitsplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Sehbehindertensitzplatz">blind</span><span class="use-symbols__material-iconinfo">Sehbehindertenarbeitsplatz</span></a></div>
	</div>
</div>

Default Symbol (Font-Size 24px, Horizontal, großer Abstand, Aurichtung zentral)

<div class="c-use-symbols--default" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit zentrierter Darstellung und größerem Abstand</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-center is-more-distance">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">120 Sitzplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Essen">dining</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Buchscanner">qr_code_scanner</span><span class="use-symbols__material-iconinfo">Buchscanner Stockwerk 2 (Material icon)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">groups</span><span class="use-symbols__material-iconinfo">Material Icons Gruppenräume</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">diversity_3</span><span class="use-symbols__material-iconinfo">Gruppenarbeitsplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Sehbehindertensitzplatz">blind</span><span class="use-symbols__material-iconinfo">Sehbehindertenarbeitsplatz</span></a></div>
	</div>
</div>

Default Symbol (Font-Size 24px, Horizontal, Aurichtung zentral)

<div class="c-use-symbols--default" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage mit horizontaler Anordnung und zentrierter Darstellung</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-center">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">120 Sitzplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Essen">dining</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Buchscanner">qr_code_scanner</span><span class="use-symbols__material-iconinfo">Buchscanner Stockwerk 2 (Material icon)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">groups</span><span class="use-symbols__material-iconinfo">Material Icons Gruppenräume</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Gruppenräume">diversity_3</span><span class="use-symbols__material-iconinfo">Gruppenarbeitsplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Sehbehindertensitzplatz">blind</span><span class="use-symbols__material-iconinfo">Sehbehindertenarbeitsplatz</span></a></div>
	</div>
</div>

Default Symbol Font-Size 24px Vertikal

<div class="c-use-symbols--default is-vertical" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Legende</h2>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">Anzahl verfügbarer Sitzplätze im Raum (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">Anzahl verfügbarer Sitzplätze im Raum (Lösung Uni Wien, MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Tische">desk</span><span class="use-symbols__material-iconinfo">Anzahl verfügbarer Tische im Raum (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerechte Benutzung möglich (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span><span class="use-symbols__material-iconinfo">Scannernutzung möglich (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Gruppenräume">groups</span><span class="use-symbols__material-iconinfo">Gruppenräume (MS / MI)</span></a></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Gruppenräume">diversity_3</span><span class="use-symbols__material-iconinfo">Gruppenarbeitsplätze (Uni Wien, MS / MI)</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span><span class="use-symbols__material-iconinfo"> Mutter-Kind-Raum (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span><span class="use-symbols__material-iconinfo">Sofa/Lounge (auch Uni Wien, MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span><span class="use-symbols__material-iconinfo">Platzreservierung (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Platzreservierung (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien, MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span><span class="use-symbols__material-iconinfo">Einzelcarrels (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Snack-, Getränkeautomat">fastfood</span><span class="use-symbols__material-iconinfo">Café-/Snack-, getränkeautomat (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Snack-, Getränkeautomat">local_cafe</span><span class="use-symbols__material-iconinfo"> Café-/Snack-, Getränkeautomat (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Snack-, Getränkeautomat">dining</span><span class="use-symbols__material-iconinfo">Café-/Snack-, Getränkeautomat (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Sehbehindertensitzplatz">blind</span><span class="use-symbols__material-iconinfo">Sehbehindertenarbeitsplatz (MS / MI)</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span><span class="use-symbols__material-iconinfo">Recherche-P (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span><span class="use-symbols__material-iconinfo">Zugang mit LMU-Card (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span><span class="use-symbols__material-iconinfo">aktive Teilnahme Videokonferenz (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span><span class="use-symbols__material-iconinfo">aktive Teilnahme Videokonferenz (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span><span class="use-symbols__material-iconinfo">Kontrollierte Temperierung (in Uni Wien Klimaanlage, MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span><span class="use-symbols__material-iconinfo">Mietschließfach MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span><span class="use-symbols__material-iconinfo">Kein Mietschließfach (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span><span class="use-symbols__material-iconinfo">Support im Zeitraum von 9.00 - 12:00 Uhr (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span><span class="use-symbols__material-iconinfo">Support (MS / MI)</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Buchscanner">qr_code_scanner</span><span class="use-symbols__material-iconinfo">Selbstverbucher (MS / MI)</span></a></div>
	</div>
</div>

Default Symbol Font-Size 24px mit Iconinfo BOLD

<div class="c-use-symbols--default" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon  is-font-bold"><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon  is-font-bold"><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon  is-font-bold"><span class="use-symbols__material-icons" title="Symbol Zahnrad als Settings">settings</span></div>
		<div class="use-symbols__one-icon  is-font-bold"><span class="use-symbols__material-icons" title="Symbol Check als Haken">check</span></div>
		<div class="use-symbols__one-icon  is-font-bold"><span class="use-symbols__material-icons" title="Symbol Bolt als Blitz">bolt</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
	</div>
</div>

Default mit Symbol Font-Size L

<div class="c-use-symbols--default fsizeL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zahnrad als Settings">settings</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Check als Haken">check</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Bolt als Blitz">bolt</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
	</div>
</div>

Default mit Symbol (Font-Size L, horizontal, großer Abstand)

<div class="c-use-symbols--default fsizeL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-left is-more-distance">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zahnrad als Settings">settings</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Check als Haken">check</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Bolt als Blitz">bolt</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
	</div>
</div>

Default mit Symbol (Font-Size L, horizontal, großer Abstand, Ausrichtung Zentral)

<div class="c-use-symbols--default fsizeL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-center is-more-distance">
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sitzplätze">chair_alt</span><span class="use-symbols__material-iconinfo">120 Sitzplätze</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zahnrad als Settings">settings</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Check als Haken">check</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Bolt als Blitz">bolt</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></div>
	</div>
</div>

Default mit Symbol Font-Size XL

<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
	</div>
</div>

Default mit Symbol(Font-Size XL, horizontal, großer Abstand)

<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-left is-more-distance">
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
	</div>
</div>

Default mit Symbol(Font-Size XL, horizontal, großer Abstand, Ausrichtung horizontal Zentral)

<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-center is-more-distance">
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
	</div>
</div>

Default mit Symbol Font-Size XL, Schrift Bold und Text unter dem Pictogramm

<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Hier dann Infos</div>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
	</div>
</div>

Default mit Symbol (Font-Size XL, Horizontal, Schrift Bold, Text unter dem Pictogramm, Abstand groß)

<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-left is-more-distance">
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
	</div>
</div>

Default mit Symbol (Font-Size XL, Horizontal, Schrift Bold, Text unter dem Pictogramm, Alignment Center, Abstand groß)

<div class="c-use-symbols--default fsizeXL" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Landingpage</h2>
	<div class="use-symbols__text">Um den Abstand zu vergrößern muss das Attribute &#x27;useDistanceClasses&#x27; mit dem String &#x27;is-more-distance&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-more-distance&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Um die Pictogramme zu zentrieren muss das Attribute &#x27;useAlignmentClasses&#x27; mit dem String &#x27;is-alignment-center&#x27; in dem Settings-Attribute gesetzt sein. Dies bindet eine Klasse &#x27;is-alignment-center&#x27; für das DIV-Element mit der Klasse &#x27;use-symbols__iconarea&#x27; ein. Beide Attribute haben nur bei horizontalen Anordnungen eine Auswirkung.</div>
	<div class="use-symbols__iconarea is-alignment-center is-more-distance">
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Benutzerkonto">person</span><span class="use-symbols__material-iconinfo">Benutzerkonto</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für E-Medien-Login">lock</span><span class="use-symbols__material-iconinfo">E-Medien-Login</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Öffnungszeiten">access_time</span><span class="use-symbols__material-iconinfo">Öffnungszeiten</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Leseplatzreservierung">event_available</span><span class="use-symbols__material-iconinfo">Leseplatzreservierung</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für OPAC Online Katalog">library_books</span><span class="use-symbols__material-iconinfo">OPAC Online Katalog</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für Forschungsdatenmanagement">storage</span><span class="use-symbols__material-iconinfo">Forschungsdatenmanagement</span></a></div>
		<div class="use-symbols__one-icon  is-font-bold is-text-under"><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Pictogramm für FAQ">live_help</span><span class="use-symbols__material-iconinfo">FAQ</span></a></div>
	</div>
</div>

RTE

<div class="c-use-symbols--rte" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite</h2>
	<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
	</div>
</div>

RTE

<div class="c-use-symbols--rte" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste in Reihe mit mehreren Symbolen aus der Font Material Symbols in Detailseite (Horizontal, mit Abstand, zentriert)</h2>
	<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea is-alignment-center is-more-distance">
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Anzahl Sitzplätze">people</span><span class="use-symbols__material-iconinfo">120 Sitzplätze (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Tisch">desk</span><span class="use-symbols__material-iconinfo">30 Tische</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Rollstuhlfahrer für Behindertengerechte Nutzung">accessible</span><span class="use-symbols__material-iconinfo">Behindertengerecht</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Scanner">scanner</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Mutter-Kind-Raum">family_restroom</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Sofa/Lounge">weekend</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">calendar_month</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">event_available</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Platzreservierung">access_time</span><span class="use-symbols__material-iconinfo">Platzreservierung (Uni Wien)</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Einzelcarrels">meeting_room</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Café-/Getränkeautomat">local_cafe</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Recherche-PC">desktop_windows</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Zugang mit LMU-Card ">credit_card</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">video_chat</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol aktive Teilnahme Videokonferenz">support_agent</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kontrollierte Temperierung">ac_unit</span></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Support">contact_support</span></a></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Support">live_help</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Miet-Schließfach">key</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Kein Miet-Schließfach">key_off</span></div>
		<div class="use-symbols__one-icon "><span class="use-symbols__material-icons" title="Symbol Essen">dining</span></div>
	</div>
</div>

RTEVertical

<div class="c-use-symbols--rte is-vertical" data-css="c-use-symbols">
	<h2 class="use-symbols__headline">Iconleiste untereinander mit mehreren Symbolen aus der Font Material Symbols in Detailseite</h2>
	<div class="use-symbols__text">Hier steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea is-alignment-left">
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Drucker">print</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
		<div class="use-symbols__one-icon "><a href="#" class="use-symbols__icon-link" title="Link auf ..." target="_blank"><span class="use-symbols__material-icons" title="Symbol Haus als Home">home</span><span class="use-symbols__material-iconinfo">Zusatztext zum Icon</span></a></div>
	</div>
</div>

Wonach suchst du?