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

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 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 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, Schrift Bold und Text unter dem Pictogramm

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

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

RTE

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

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

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

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 |

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">
	{{#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"
			},
			"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 ..."
						}
					}
				]
			}
		},
		"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"
						}
					}
				]
			}
		},
		"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_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 steht dann noch Näheres zu der Iconleiste (Optional)",
				"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 ..."
						}
					}
				]
			}
		},
		"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;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
	}



	.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__material-icons {
			font-size: 3.6rem;
		}
	}

	&.fsizeXL {

		.use-symbols__one-icon {
			padding-right: 24px;
		}
		.use-symbols__material-icons {
			font-size: 4.8rem;
		}

	}

	&.is-vertical {
		.use-symbols__iconarea {
			flex-direction: column;
			width: 100%;
			align-items: flex-start;
		}
		.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: 68px; //da padding-bottom 12px bei Icon (use-symbols__one-icon) sonst 80px
	}

	@include bp($bp-tablet-p) {
		margin-bottom:88px; //da padding-bottom 12px bei Icon (use-symbols__one-icon) sonst 100px
	}

	@include bp(1920px) {
		margin-bottom: 108px; //da padding-bottom 12px bei Icon (use-symbols__one-icon) sonst 120px
	}
}

.c-use-symbols--rte {
	margin-bottom: 3px; //da padding-bottom 12px bei Icon  (use-symbols__one-icon) sonst 15px

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



HTML Output

Default Symbol Font-Size 24px

<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">
		<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">
		<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">
		<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">
		<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">
		<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 steht dann noch Näheres zu der Iconleiste (Optional)</div>
	<div class="use-symbols__iconarea">
		<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">
		<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>

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">
		<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?