The included iconset has been developed in cooperation with the Center of Excellence @ Personenverkehr and replaces the previous enterprise only icons. More information: https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Icons/Funktionale-Icons-Architektur-und-Fahrzeuge
You could use the icons either within your SCSS code as described below, which is the recommended approach. Alternatively you could also use the attribute based configuration.
And we're additionally providing the icons as the sources (SVG) files as well.
All of the available glyphs variables are shown on this page right next to the icon, with the SCSS and attribute based variables/values shown next to them.
Use the following SCSS mixin for setting an icon:
// schema
@mixin icon(
$glyph: "",
$size: $icon-size,
$style: $icon-style,
$position: "before"
);
// example
span.with-an-icon {
@include icon(glyph(account), 20, "outline");
}
As both $icon-size and $icon-style are available to get configured with default values, and $position is only a variant (explained in the next paragraph) only the first one is really mandatory.
If you'd like to include the icon after the text, set the last parameter to after.
In case of the need to display only the icon and hide the text next to it, use the following mixin:
@include is-icon-text-replace();
Use the data-icon and data-icon-variant HTML attributes for setting an icon:
<a href="#" data-icon="alarm" data-icon-variant="24-outline">Alarm</a>
The data-icon-variant is an optional attribute, that you don't need to declare in case that you'd like to use the default icon size and style, that are defined by the $icon-size and $icon-style SCSS variables (size: 24 and style: outline as defaults), that could obviously get overwritten by individual SCSS declarations; so you'll end up with a very simply definition when relying on the defaults:
<a href="#" data-icon="alarm">Alarm</a>
Of course this icons definition does as well have an equivalent for icons after the content: data-icon-variant-after
If you'd like to include the icon after the content/text, use the HTML attribute data-icon-after instead of data-icon, example:
<a
href="#"
data-icon-after="alarm"
data-icon-variant-after="24-outline"
class="elm-link"
>Alarm</a
>
In case of the need to display only the icon and hide the text next to it, use the following class:
.is-icon-text-replace
font-sizeIf you'd like to control the icons font-size any further (defining sizes in between all of the data-icon-variant declarations, like e.g. having an icon font-size of 23px instead of 24px when defining data-icon-variant="24-outline"), you could set set one of the CSS variables --icon-font-size-before or --icon-font-size-after (in this case --icon-font-size-before: 23px).
<a
href="#"
data-icon="alarm"
data-icon-variant="24-outline"
style="--icon-font-size-before: 23px"
>Alarm</a
>
As mentioned above we're even also providing all of the icon sources (svg files) within this package in the folder node_modules/@db-ui/core/dist/icons/.
And we're enabling to change the colors for the illustrative icons ("pulse" and icon itself) as well as the functional icons (only the single-color icon), through the two following CSS variables / CSS custom properties, with their included default (second value):
var(--db-icon-color, currentColor)
var(--db-icon-pulse-color, #EC0016)
Regarding accessibility icons are providing cognitive complementary visual support for sighted people (e.g. people with reading difficulties), as well as quick recognition of specific functionality and UX patterns like e.g. the bin/waste paper basket symbol for a delete action.
On the other hand icons shouldn't get recognized and output by assistive technologies like screenreaders, as those glyphs or signs being used in case of an icon webfont don't necessarly provide a meaning - and on the other hand each icon being used on the page should always as well get included in conjunction with some textual description both as a fallback as well as providing some meaning even and especially if the icon itself doesn't provide a unique meaning on it's own (to all users idependently from their skill level/experience, culture, etc.).
Additionally this pattern has been tested and approved regarding accessibility.
@include icon(glyph(check-circle), 16, "filled")data-icon="check-circle" data-icon-variant="16-filled"@include icon(glyph(help), 16, "filled")data-icon="help" data-icon-variant="16-filled"@include icon(glyph(info), 16, "filled")data-icon="info" data-icon-variant="16-filled"@include icon(glyph(cancel), 16, "filled")data-icon="cancel" data-icon-variant="16-filled"@include icon(glyph(error), 16, "filled")data-icon="error" data-icon-variant="16-filled"@include icon(glyph(warning), 16, "filled")data-icon="warning" data-icon-variant="16-filled"@include icon(glyph(add), 16, "outline")data-icon="add" data-icon-variant="16-outline"@include icon(glyph(done), 16, "outline")data-icon="done" data-icon-variant="16-outline"@include icon(glyph(minus), 16, "outline")data-icon="minus" data-icon-variant="16-outline"@include icon(glyph(arrow-back), 16, "outline")data-icon="arrow-back" data-icon-variant="16-outline"@include icon(glyph(arrow-down), 16, "outline")data-icon="arrow-down" data-icon-variant="16-outline"@include icon(glyph(arrow-forward), 16, "outline")data-icon="arrow-forward" data-icon-variant="16-outline"@include icon(glyph(arrow-up), 16, "outline")data-icon="arrow-up" data-icon-variant="16-outline"@include icon(glyph(chevron-left), 16, "outline")data-icon="chevron-left" data-icon-variant="16-outline"@include icon(glyph(chevron-right), 16, "outline")data-icon="chevron-right" data-icon-variant="16-outline"@include icon(glyph(close), 16, "outline")data-icon="close" data-icon-variant="16-outline"@include icon(glyph(expand-less), 16, "outline")data-icon="expand-less" data-icon-variant="16-outline"@include icon(glyph(expand-more), 16, "outline")data-icon="expand-more" data-icon-variant="16-outline"@include icon(glyph(account), 20, "filled")data-icon="account" data-icon-variant="20-filled"@include icon(glyph(add-circle), 20, "filled")data-icon="add-circle" data-icon-variant="20-filled"@include icon(glyph(alert), 20, "filled")data-icon="alert" data-icon-variant="20-filled"@include icon(glyph(block), 20, "filled")data-icon="block" data-icon-variant="20-filled"@include icon(glyph(bookmark), 20, "filled")data-icon="bookmark" data-icon-variant="20-filled"@include icon(glyph(build), 20, "filled")data-icon="build" data-icon-variant="20-filled"@include icon(glyph(camera), 20, "filled")data-icon="camera" data-icon-variant="20-filled"@include icon(glyph(check-circle), 20, "filled")data-icon="check-circle" data-icon-variant="20-filled"@include icon(glyph(cloud), 20, "filled")data-icon="cloud" data-icon-variant="20-filled"@include icon(glyph(copy), 20, "filled")data-icon="copy" data-icon-variant="20-filled"@include icon(glyph(credit-card), 20, "filled")data-icon="credit-card" data-icon-variant="20-filled"@include icon(glyph(dashboard), 20, "filled")data-icon="dashboard" data-icon-variant="20-filled"@include icon(glyph(discount), 20, "filled")data-icon="discount" data-icon-variant="20-filled"@include icon(glyph(edit), 20, "filled")data-icon="edit" data-icon-variant="20-filled"@include icon(glyph(folder), 20, "filled")data-icon="folder" data-icon-variant="20-filled"@include icon(glyph(folder-open), 20, "filled")data-icon="folder-open" data-icon-variant="20-filled"@include icon(glyph(generic-card), 20, "filled")data-icon="generic-card" data-icon-variant="20-filled"@include icon(glyph(heart), 20, "filled")data-icon="heart" data-icon-variant="20-filled"@include icon(glyph(help), 20, "filled")data-icon="help" data-icon-variant="20-filled"@include icon(glyph(image), 20, "filled")data-icon="image" data-icon-variant="20-filled"@include icon(glyph(info), 20, "filled")data-icon="info" data-icon-variant="20-filled"@include icon(glyph(lock-close), 20, "filled")data-icon="lock-close" data-icon-variant="20-filled"@include icon(glyph(lock-open), 20, "filled")data-icon="lock-open" data-icon-variant="20-filled"@include icon(glyph(pin), 20, "filled")data-icon="pin" data-icon-variant="20-filled"@include icon(glyph(print), 20, "filled")data-icon="print" data-icon-variant="20-filled"@include icon(glyph(remove), 20, "filled")data-icon="remove" data-icon-variant="20-filled"@include icon(glyph(resize), 20, "filled")data-icon="resize" data-icon-variant="20-filled"@include icon(glyph(save), 20, "filled")data-icon="save" data-icon-variant="20-filled"@include icon(glyph(schedule), 20, "filled")data-icon="schedule" data-icon-variant="20-filled"@include icon(glyph(sepa), 20, "filled")data-icon="sepa" data-icon-variant="20-filled"@include icon(glyph(shopping-bag), 20, "filled")data-icon="shopping-bag" data-icon-variant="20-filled"@include icon(glyph(shopping-basket), 20, "filled")data-icon="shopping-basket" data-icon-variant="20-filled"@include icon(glyph(shopping-basket-disabled), 20, "filled")data-icon="shopping-basket-disabled" data-icon-variant="20-filled"@include icon(glyph(star), 20, "filled")data-icon="star" data-icon-variant="20-filled"@include icon(glyph(voucher), 20, "filled")data-icon="voucher" data-icon-variant="20-filled"@include icon(glyph(fast-backward), 20, "filled")data-icon="fast-backward" data-icon-variant="20-filled"@include icon(glyph(fast-forward), 20, "filled")data-icon="fast-forward" data-icon-variant="20-filled"@include icon(glyph(microphone), 20, "filled")data-icon="microphone" data-icon-variant="20-filled"@include icon(glyph(play), 20, "filled")data-icon="play" data-icon-variant="20-filled"@include icon(glyph(skip-backward), 20, "filled")data-icon="skip-backward" data-icon-variant="20-filled"@include icon(glyph(skip-forward), 20, "filled")data-icon="skip-forward" data-icon-variant="20-filled"@include icon(glyph(stop), 20, "filled")data-icon="stop" data-icon-variant="20-filled"@include icon(glyph(subtitles), 20, "filled")data-icon="subtitles" data-icon-variant="20-filled"@include icon(glyph(call), 20, "filled")data-icon="call" data-icon-variant="20-filled"@include icon(glyph(chat), 20, "filled")data-icon="chat" data-icon-variant="20-filled"@include icon(glyph(conversation), 20, "filled")data-icon="conversation" data-icon-variant="20-filled"@include icon(glyph(feedback), 20, "filled")data-icon="feedback" data-icon-variant="20-filled"@include icon(glyph(question), 20, "filled")data-icon="question" data-icon-variant="20-filled"@include icon(glyph(receive-item), 20, "filled")data-icon="receive-item" data-icon-variant="20-filled"@include icon(glyph(share-item), 20, "filled")data-icon="share-item" data-icon-variant="20-filled"@include icon(glyph(day), 20, "filled")data-icon="day" data-icon-variant="20-filled"@include icon(glyph(hydrogen), 20, "filled")data-icon="hydrogen" data-icon-variant="20-filled"@include icon(glyph(marketplace), 20, "filled")data-icon="marketplace" data-icon-variant="20-filled"@include icon(glyph(medical), 20, "filled")data-icon="medical" data-icon-variant="20-filled"@include icon(glyph(night), 20, "filled")data-icon="night" data-icon-variant="20-filled"@include icon(glyph(platform), 20, "filled")data-icon="platform" data-icon-variant="20-filled"@include icon(glyph(reservation), 20, "filled")data-icon="reservation" data-icon-variant="20-filled"@include icon(glyph(coffee-cup), 20, "filled")data-icon="coffee-cup" data-icon-variant="20-filled"@include icon(glyph(database), 20, "filled")data-icon="database" data-icon-variant="20-filled"@include icon(glyph(capacity-indicator), 20, "filled")data-icon="capacity-indicator" data-icon-variant="20-filled"@include icon(glyph(capacity-indicator-fully-booked), 20, "filled")data-icon="capacity-indicator-fully-booked" data-icon-variant="20-filled"@include icon(glyph(capacity-indicator-high), 20, "filled")data-icon="capacity-indicator-high" data-icon-variant="20-filled"@include icon(glyph(capacity-indicator-low), 20, "filled")data-icon="capacity-indicator-low" data-icon-variant="20-filled"@include icon(glyph(destination), 20, "filled")data-icon="destination" data-icon-variant="20-filled"@include icon(glyph(gps), 20, "filled")data-icon="gps" data-icon-variant="20-filled"@include icon(glyph(gps-north), 20, "filled")data-icon="gps-north" data-icon-variant="20-filled"@include icon(glyph(home), 20, "filled")data-icon="home" data-icon-variant="20-filled"@include icon(glyph(parking), 20, "filled")data-icon="parking" data-icon-variant="20-filled"@include icon(glyph(place), 20, "filled")data-icon="place" data-icon-variant="20-filled"@include icon(glyph(stop-sign), 20, "filled")data-icon="stop-sign" data-icon-variant="20-filled"@include icon(glyph(cancel), 20, "filled")data-icon="cancel" data-icon-variant="20-filled"@include icon(glyph(grid-view), 20, "filled")data-icon="grid-view" data-icon-variant="20-filled"@include icon(glyph(error), 20, "filled")data-icon="error" data-icon-variant="20-filled"@include icon(glyph(warning), 20, "filled")data-icon="warning" data-icon-variant="20-filled"@include icon(glyph(bahnbonus-card), 20, "filled")data-icon="bahnbonus-card" data-icon-variant="20-filled"@include icon(glyph(bahncard), 20, "filled")data-icon="bahncard" data-icon-variant="20-filled"@include icon(glyph(multiple-cards), 20, "filled")data-icon="multiple-cards" data-icon-variant="20-filled"@include icon(glyph(airplane), 20, "filled")data-icon="airplane" data-icon-variant="20-filled"@include icon(glyph(bicycle), 20, "filled")data-icon="bicycle" data-icon-variant="20-filled"@include icon(glyph(bicycle-trailer), 20, "filled")data-icon="bicycle-trailer" data-icon-variant="20-filled"@include icon(glyph(call-a-bike), 20, "filled")data-icon="call-a-bike" data-icon-variant="20-filled"@include icon(glyph(car), 20, "filled")data-icon="car" data-icon-variant="20-filled"@include icon(glyph(carsharing), 20, "filled")data-icon="carsharing" data-icon-variant="20-filled"@include icon(glyph(electric-locomotive), 20, "filled")data-icon="electric-locomotive" data-icon-variant="20-filled"@include icon(glyph(electric-scooter), 20, "filled")data-icon="electric-scooter" data-icon-variant="20-filled"@include icon(glyph(ev-car), 20, "filled")data-icon="ev-car" data-icon-variant="20-filled"@include icon(glyph(ferry), 20, "filled")data-icon="ferry" data-icon-variant="20-filled"@include icon(glyph(handcart), 20, "filled")data-icon="handcart" data-icon-variant="20-filled"@include icon(glyph(ice), 20, "filled")data-icon="ice" data-icon-variant="20-filled"@include icon(glyph(intercity-train), 20, "filled")data-icon="intercity-train" data-icon-variant="20-filled"@include icon(glyph(local-bus), 20, "filled")data-icon="local-bus" data-icon-variant="20-filled"@include icon(glyph(long-distance-bus), 20, "filled")data-icon="long-distance-bus" data-icon-variant="20-filled"@include icon(glyph(local-train), 20, "filled")data-icon="local-train" data-icon-variant="20-filled"@include icon(glyph(s-bahn), 20, "filled")data-icon="s-bahn" data-icon-variant="20-filled"@include icon(glyph(scooter), 20, "filled")data-icon="scooter" data-icon-variant="20-filled"@include icon(glyph(speedboat), 20, "filled")data-icon="speedboat" data-icon-variant="20-filled"@include icon(glyph(subway), 20, "filled")data-icon="subway" data-icon-variant="20-filled"@include icon(glyph(taxi), 20, "filled")data-icon="taxi" data-icon-variant="20-filled"@include icon(glyph(train-and-car), 20, "filled")data-icon="train-and-car" data-icon-variant="20-filled"@include icon(glyph(tram), 20, "filled")data-icon="tram" data-icon-variant="20-filled"@include icon(glyph(walking), 20, "filled")data-icon="walking" data-icon-variant="20-filled"@include icon(glyph(walking-fast), 20, "filled")data-icon="walking-fast" data-icon-variant="20-filled"@include icon(glyph(account), 20, "outline")data-icon="account" data-icon-variant="20-outline"@include icon(glyph(add), 20, "outline")data-icon="add" data-icon-variant="20-outline"@include icon(glyph(add-circle), 20, "outline")data-icon="add-circle" data-icon-variant="20-outline"@include icon(glyph(add-link), 20, "outline")data-icon="add-link" data-icon-variant="20-outline"@include icon(glyph(alarm), 20, "outline")data-icon="alarm" data-icon-variant="20-outline"@include icon(glyph(alarm-add), 20, "outline")data-icon="alarm-add" data-icon-variant="20-outline"@include icon(glyph(alert), 20, "outline")data-icon="alert" data-icon-variant="20-outline"@include icon(glyph(alert-off), 20, "outline")data-icon="alert-off" data-icon-variant="20-outline"@include icon(glyph(artificial-intelligence), 20, "outline")data-icon="artificial-intelligence" data-icon-variant="20-outline"@include icon(glyph(attachment), 20, "outline")data-icon="attachment" data-icon-variant="20-outline"@include icon(glyph(augmented-reality), 20, "outline")data-icon="augmented-reality" data-icon-variant="20-outline"@include icon(glyph(block), 20, "outline")data-icon="block" data-icon-variant="20-outline"@include icon(glyph(bookmark), 20, "outline")data-icon="bookmark" data-icon-variant="20-outline"@include icon(glyph(bug), 20, "outline")data-icon="bug" data-icon-variant="20-outline"@include icon(glyph(build), 20, "outline")data-icon="build" data-icon-variant="20-outline"@include icon(glyph(calendar), 20, "outline")data-icon="calendar" data-icon-variant="20-outline"@include icon(glyph(camera), 20, "outline")data-icon="camera" data-icon-variant="20-outline"@include icon(glyph(cash), 20, "outline")data-icon="cash" data-icon-variant="20-outline"@include icon(glyph(check-circle), 20, "outline")data-icon="check-circle" data-icon-variant="20-outline"@include icon(glyph(cloud), 20, "outline")data-icon="cloud" data-icon-variant="20-outline"@include icon(glyph(cloud-download), 20, "outline")data-icon="cloud-download" data-icon-variant="20-outline"@include icon(glyph(cloud-upload), 20, "outline")data-icon="cloud-upload" data-icon-variant="20-outline"@include icon(glyph(compass), 20, "outline")data-icon="compass" data-icon-variant="20-outline"@include icon(glyph(copy), 20, "outline")data-icon="copy" data-icon-variant="20-outline"@include icon(glyph(credit-card), 20, "outline")data-icon="credit-card" data-icon-variant="20-outline"@include icon(glyph(dashboard), 20, "outline")data-icon="dashboard" data-icon-variant="20-outline"@include icon(glyph(delete), 20, "outline")data-icon="delete" data-icon-variant="20-outline"@include icon(glyph(discount), 20, "outline")data-icon="discount" data-icon-variant="20-outline"@include icon(glyph(document), 20, "outline")data-icon="document" data-icon-variant="20-outline"@include icon(glyph(document-check), 20, "outline")data-icon="document-check" data-icon-variant="20-outline"@include icon(glyph(document-cross), 20, "outline")data-icon="document-cross" data-icon-variant="20-outline"@include icon(glyph(done), 20, "outline")data-icon="done" data-icon-variant="20-outline"@include icon(glyph(download), 20, "outline")data-icon="download" data-icon-variant="20-outline"@include icon(glyph(drag-and-drop), 20, "outline")data-icon="drag-and-drop" data-icon-variant="20-outline"@include icon(glyph(edit), 20, "outline")data-icon="edit" data-icon-variant="20-outline"@include icon(glyph(euro-sign), 20, "outline")data-icon="euro-sign" data-icon-variant="20-outline"@include icon(glyph(face-delighted), 20, "outline")data-icon="face-delighted" data-icon-variant="20-outline"@include icon(glyph(face-disappointed), 20, "outline")data-icon="face-disappointed" data-icon-variant="20-outline"@include icon(glyph(face-neutral), 20, "outline")data-icon="face-neutral" data-icon-variant="20-outline"@include icon(glyph(face-sad), 20, "outline")data-icon="face-sad" data-icon-variant="20-outline"@include icon(glyph(face-smiling), 20, "outline")data-icon="face-smiling" data-icon-variant="20-outline"@include icon(glyph(filter), 20, "outline")data-icon="filter" data-icon-variant="20-outline"@include icon(glyph(fingerprint), 20, "outline")data-icon="fingerprint" data-icon-variant="20-outline"@include icon(glyph(folder), 20, "outline")data-icon="folder" data-icon-variant="20-outline"@include icon(glyph(folder-open), 20, "outline")data-icon="folder-open" data-icon-variant="20-outline"@include icon(glyph(generic-card), 20, "outline")data-icon="generic-card" data-icon-variant="20-outline"@include icon(glyph(giftcard), 20, "outline")data-icon="giftcard" data-icon-variant="20-outline"@include icon(glyph(hearing), 20, "outline")data-icon="hearing" data-icon-variant="20-outline"@include icon(glyph(hearing-disabled), 20, "outline")data-icon="hearing-disabled" data-icon-variant="20-outline"@include icon(glyph(heart), 20, "outline")data-icon="heart" data-icon-variant="20-outline"@include icon(glyph(help), 20, "outline")data-icon="help" data-icon-variant="20-outline"@include icon(glyph(id-card), 20, "outline")data-icon="id-card" data-icon-variant="20-outline"@include icon(glyph(image), 20, "outline")data-icon="image" data-icon-variant="20-outline"@include icon(glyph(info), 20, "outline")data-icon="info" data-icon-variant="20-outline"@include icon(glyph(key), 20, "outline")data-icon="key" data-icon-variant="20-outline"@include icon(glyph(legal), 20, "outline")data-icon="legal" data-icon-variant="20-outline"@include icon(glyph(lightbulb), 20, "outline")data-icon="lightbulb" data-icon-variant="20-outline"@include icon(glyph(lock-close), 20, "outline")data-icon="lock-close" data-icon-variant="20-outline"@include icon(glyph(lock-open), 20, "outline")data-icon="lock-open" data-icon-variant="20-outline"@include icon(glyph(log-out), 20, "outline")data-icon="log-out" data-icon-variant="20-outline"@include icon(glyph(logbook), 20, "outline")data-icon="logbook" data-icon-variant="20-outline"@include icon(glyph(minus), 20, "outline")data-icon="minus" data-icon-variant="20-outline"@include icon(glyph(piggybank), 20, "outline")data-icon="piggybank" data-icon-variant="20-outline"@include icon(glyph(pin), 20, "outline")data-icon="pin" data-icon-variant="20-outline"@include icon(glyph(print), 20, "outline")data-icon="print" data-icon-variant="20-outline"@include icon(glyph(pulse-wave), 20, "outline")data-icon="pulse-wave" data-icon-variant="20-outline"@include icon(glyph(push-button), 20, "outline")data-icon="push-button" data-icon-variant="20-outline"@include icon(glyph(remove), 20, "outline")data-icon="remove" data-icon-variant="20-outline"@include icon(glyph(resize), 20, "outline")data-icon="resize" data-icon-variant="20-outline"@include icon(glyph(resize-handle-corner), 20, "outline")data-icon="resize-handle-corner" data-icon-variant="20-outline"@include icon(glyph(save), 20, "outline")data-icon="save" data-icon-variant="20-outline"@include icon(glyph(schedule), 20, "outline")data-icon="schedule" data-icon-variant="20-outline"@include icon(glyph(search), 20, "outline")data-icon="search" data-icon-variant="20-outline"@include icon(glyph(send), 20, "outline")data-icon="send" data-icon-variant="20-outline"@include icon(glyph(sepa), 20, "outline")data-icon="sepa" data-icon-variant="20-outline"@include icon(glyph(settings), 20, "outline")data-icon="settings" data-icon-variant="20-outline"@include icon(glyph(share), 20, "outline")data-icon="share" data-icon-variant="20-outline"@include icon(glyph(shopping-bag), 20, "outline")data-icon="shopping-bag" data-icon-variant="20-outline"@include icon(glyph(shopping-basket), 20, "outline")data-icon="shopping-basket" data-icon-variant="20-outline"@include icon(glyph(shopping-basket-disabled), 20, "outline")data-icon="shopping-basket-disabled" data-icon-variant="20-outline"@include icon(glyph(shopping-cart), 20, "outline")data-icon="shopping-cart" data-icon-variant="20-outline"@include icon(glyph(shopping-cart-disabled), 20, "outline")data-icon="shopping-cart-disabled" data-icon-variant="20-outline"@include icon(glyph(sort-down), 20, "outline")data-icon="sort-down" data-icon-variant="20-outline"@include icon(glyph(sort-up), 20, "outline")data-icon="sort-up" data-icon-variant="20-outline"@include icon(glyph(star), 20, "outline")data-icon="star" data-icon-variant="20-outline"@include icon(glyph(swap-horizontal), 20, "outline")data-icon="swap-horizontal" data-icon-variant="20-outline"@include icon(glyph(swap-vertical), 20, "outline")data-icon="swap-vertical" data-icon-variant="20-outline"@include icon(glyph(thumb-up), 20, "outline")data-icon="thumb-up" data-icon-variant="20-outline"@include icon(glyph(thumb-up-down), 20, "outline")data-icon="thumb-up-down" data-icon-variant="20-outline"@include icon(glyph(translation), 20, "outline")data-icon="translation" data-icon-variant="20-outline"@include icon(glyph(undo), 20, "outline")data-icon="undo" data-icon-variant="20-outline"@include icon(glyph(upload), 20, "outline")data-icon="upload" data-icon-variant="20-outline"@include icon(glyph(visibility), 20, "outline")data-icon="visibility" data-icon-variant="20-outline"@include icon(glyph(visibility-off), 20, "outline")data-icon="visibility-off" data-icon-variant="20-outline"@include icon(glyph(voucher), 20, "outline")data-icon="voucher" data-icon-variant="20-outline"@include icon(glyph(website), 20, "outline")data-icon="website" data-icon-variant="20-outline"@include icon(glyph(zoom-in), 20, "outline")data-icon="zoom-in" data-icon-variant="20-outline"@include icon(glyph(zoom-out), 20, "outline")data-icon="zoom-out" data-icon-variant="20-outline"@include icon(glyph(clapperboard), 20, "outline")data-icon="clapperboard" data-icon-variant="20-outline"@include icon(glyph(fast-backward), 20, "outline")data-icon="fast-backward" data-icon-variant="20-outline"@include icon(glyph(fast-backward-10), 20, "outline")data-icon="fast-backward-10" data-icon-variant="20-outline"@include icon(glyph(fast-backward-30), 20, "outline")data-icon="fast-backward-30" data-icon-variant="20-outline"@include icon(glyph(fast-backward-empty), 20, "outline")data-icon="fast-backward-empty" data-icon-variant="20-outline"@include icon(glyph(fast-forward), 20, "outline")data-icon="fast-forward" data-icon-variant="20-outline"@include icon(glyph(fast-forward-10), 20, "outline")data-icon="fast-forward-10" data-icon-variant="20-outline"@include icon(glyph(fast-forward-30), 20, "outline")data-icon="fast-forward-30" data-icon-variant="20-outline"@include icon(glyph(fast-forward-empty), 20, "outline")data-icon="fast-forward-empty" data-icon-variant="20-outline"@include icon(glyph(microphone), 20, "outline")data-icon="microphone" data-icon-variant="20-outline"@include icon(glyph(pause), 20, "outline")data-icon="pause" data-icon-variant="20-outline"@include icon(glyph(play), 20, "outline")data-icon="play" data-icon-variant="20-outline"@include icon(glyph(skip-backward), 20, "outline")data-icon="skip-backward" data-icon-variant="20-outline"@include icon(glyph(skip-forward), 20, "outline")data-icon="skip-forward" data-icon-variant="20-outline"@include icon(glyph(stop), 20, "outline")data-icon="stop" data-icon-variant="20-outline"@include icon(glyph(subtitles), 20, "outline")data-icon="subtitles" data-icon-variant="20-outline"@include icon(glyph(volume-down), 20, "outline")data-icon="volume-down" data-icon-variant="20-outline"@include icon(glyph(volume-mute), 20, "outline")data-icon="volume-mute" data-icon-variant="20-outline"@include icon(glyph(volume-off), 20, "outline")data-icon="volume-off" data-icon-variant="20-outline"@include icon(glyph(volume-up), 20, "outline")data-icon="volume-up" data-icon-variant="20-outline"@include icon(glyph(logo), 20, "outline")data-icon="logo" data-icon-variant="20-outline"@include icon(glyph(call), 20, "outline")data-icon="call" data-icon-variant="20-outline"@include icon(glyph(chat), 20, "outline")data-icon="chat" data-icon-variant="20-outline"@include icon(glyph(conversation), 20, "outline")data-icon="conversation" data-icon-variant="20-outline"@include icon(glyph(fax), 20, "outline")data-icon="fax" data-icon-variant="20-outline"@include icon(glyph(feedback), 20, "outline")data-icon="feedback" data-icon-variant="20-outline"@include icon(glyph(mail), 20, "outline")data-icon="mail" data-icon-variant="20-outline"@include icon(glyph(mobile-phone), 20, "outline")data-icon="mobile-phone" data-icon-variant="20-outline"@include icon(glyph(mobile-off), 20, "outline")data-icon="mobile-off" data-icon-variant="20-outline"@include icon(glyph(question), 20, "outline")data-icon="question" data-icon-variant="20-outline"@include icon(glyph(receive-item), 20, "outline")data-icon="receive-item" data-icon-variant="20-outline"@include icon(glyph(share-item), 20, "outline")data-icon="share-item" data-icon-variant="20-outline"@include icon(glyph(wifi), 20, "outline")data-icon="wifi" data-icon-variant="20-outline"@include icon(glyph(wifi-off), 20, "outline")data-icon="wifi-off" data-icon-variant="20-outline"@include icon(glyph(mask), 20, "outline")data-icon="mask" data-icon-variant="20-outline"@include icon(glyph(playground), 20, "outline")data-icon="playground" data-icon-variant="20-outline"@include icon(glyph(restricted-mobility-toilet), 20, "outline")data-icon="restricted-mobility-toilet" data-icon-variant="20-outline"@include icon(glyph(shower), 20, "outline")data-icon="shower" data-icon-variant="20-outline"@include icon(glyph(shower-men), 20, "outline")data-icon="shower-men" data-icon-variant="20-outline"@include icon(glyph(shower-women), 20, "outline")data-icon="shower-women" data-icon-variant="20-outline"@include icon(glyph(sink), 20, "outline")data-icon="sink" data-icon-variant="20-outline"@include icon(glyph(wc), 20, "outline")data-icon="wc" data-icon-variant="20-outline"@include icon(glyph(wc-men), 20, "outline")data-icon="wc-men" data-icon-variant="20-outline"@include icon(glyph(wc-sign), 20, "outline")data-icon="wc-sign" data-icon-variant="20-outline"@include icon(glyph(wc-woman), 20, "outline")data-icon="wc-woman" data-icon-variant="20-outline"@include icon(glyph(air-condition), 20, "outline")data-icon="air-condition" data-icon-variant="20-outline"@include icon(glyph(buggy), 20, "outline")data-icon="buggy" data-icon-variant="20-outline"@include icon(glyph(clothing-hanger), 20, "outline")data-icon="clothing-hanger" data-icon-variant="20-outline"@include icon(glyph(day), 20, "outline")data-icon="day" data-icon-variant="20-outline"@include icon(glyph(dog), 20, "outline")data-icon="dog" data-icon-variant="20-outline"@include icon(glyph(entry-aid), 20, "outline")data-icon="entry-aid" data-icon-variant="20-outline"@include icon(glyph(environmental-mobility-check), 20, "outline")data-icon="environmental-mobility-check" data-icon-variant="20-outline"@include icon(glyph(hydrogen), 20, "outline")data-icon="hydrogen" data-icon-variant="20-outline"@include icon(glyph(iceportal), 20, "outline")data-icon="iceportal" data-icon-variant="20-outline"@include icon(glyph(luggage-compartment), 20, "outline")data-icon="luggage-compartment" data-icon-variant="20-outline"@include icon(glyph(luggage-rack), 20, "outline")data-icon="luggage-rack" data-icon-variant="20-outline"@include icon(glyph(marketplace), 20, "outline")data-icon="marketplace" data-icon-variant="20-outline"@include icon(glyph(medical), 20, "outline")data-icon="medical" data-icon-variant="20-outline"@include icon(glyph(night), 20, "outline")data-icon="night" data-icon-variant="20-outline"@include icon(glyph(no-smoking), 20, "outline")data-icon="no-smoking" data-icon-variant="20-outline"@include icon(glyph(person-with-cane), 20, "outline")data-icon="person-with-cane" data-icon-variant="20-outline"@include icon(glyph(person-with-rollator), 20, "outline")data-icon="person-with-rollator" data-icon-variant="20-outline"@include icon(glyph(platform), 20, "outline")data-icon="platform" data-icon-variant="20-outline"@include icon(glyph(power-outlet), 20, "outline")data-icon="power-outlet" data-icon-variant="20-outline"@include icon(glyph(regioguide), 20, "outline")data-icon="regioguide" data-icon-variant="20-outline"@include icon(glyph(reservation), 20, "outline")data-icon="reservation" data-icon-variant="20-outline"@include icon(glyph(standing-room), 20, "outline")data-icon="standing-room" data-icon-variant="20-outline"@include icon(glyph(steppless-entry), 20, "outline")data-icon="steppless-entry" data-icon-variant="20-outline"@include icon(glyph(support-dog), 20, "outline")data-icon="support-dog" data-icon-variant="20-outline"@include icon(glyph(breakfast), 20, "outline")data-icon="breakfast" data-icon-variant="20-outline"@include icon(glyph(coffee-cup), 20, "outline")data-icon="coffee-cup" data-icon-variant="20-outline"@include icon(glyph(drink), 20, "outline")data-icon="drink" data-icon-variant="20-outline"@include icon(glyph(restaurant), 20, "outline")data-icon="restaurant" data-icon-variant="20-outline"@include icon(glyph(database), 20, "outline")data-icon="database" data-icon-variant="20-outline"@include icon(glyph(1st-class), 20, "outline")data-icon="1st-class" data-icon-variant="20-outline"@include icon(glyph(2nd-class), 20, "outline")data-icon="2nd-class" data-icon-variant="20-outline"@include icon(glyph(alternative-connection), 20, "outline")data-icon="alternative-connection" data-icon-variant="20-outline"@include icon(glyph(booking), 20, "outline")data-icon="booking" data-icon-variant="20-outline"@include icon(glyph(capacity-indicator), 20, "outline")data-icon="capacity-indicator" data-icon-variant="20-outline"@include icon(glyph(capacity-indicator-fully-booked), 20, "outline")data-icon="capacity-indicator-fully-booked" data-icon-variant="20-outline"@include icon(glyph(capacity-indicator-high), 20, "outline")data-icon="capacity-indicator-high" data-icon-variant="20-outline"@include icon(glyph(capacity-indicator-low), 20, "outline")data-icon="capacity-indicator-low" data-icon-variant="20-outline"@include icon(glyph(destination), 20, "outline")data-icon="destination" data-icon-variant="20-outline"@include icon(glyph(intermediary-stop), 20, "outline")data-icon="intermediary-stop" data-icon-variant="20-outline"@include icon(glyph(mixed-class), 20, "outline")data-icon="mixed-class" data-icon-variant="20-outline"@include icon(glyph(round-trip), 20, "outline")data-icon="round-trip" data-icon-variant="20-outline"@include icon(glyph(single-trip), 20, "outline")data-icon="single-trip" data-icon-variant="20-outline"@include icon(glyph(start), 20, "outline")data-icon="start" data-icon-variant="20-outline"@include icon(glyph(gps), 20, "outline")data-icon="gps" data-icon-variant="20-outline"@include icon(glyph(gps-north), 20, "outline")data-icon="gps-north" data-icon-variant="20-outline"@include icon(glyph(home), 20, "outline")data-icon="home" data-icon-variant="20-outline"@include icon(glyph(map), 20, "outline")data-icon="map" data-icon-variant="20-outline"@include icon(glyph(navigation-straight), 20, "outline")data-icon="navigation-straight" data-icon-variant="20-outline"@include icon(glyph(navigation-to-left), 20, "outline")data-icon="navigation-to-left" data-icon-variant="20-outline"@include icon(glyph(navigation-to-right), 20, "outline")data-icon="navigation-to-right" data-icon-variant="20-outline"@include icon(glyph(navigation-u-turn), 20, "outline")data-icon="navigation-u-turn" data-icon-variant="20-outline"@include icon(glyph(stop-sign), 20, "outline")data-icon="stop-sign" data-icon-variant="20-outline"@include icon(glyph(parking), 20, "outline")data-icon="parking" data-icon-variant="20-outline"@include icon(glyph(place), 20, "outline")data-icon="place" data-icon-variant="20-outline"@include icon(glyph(set-position), 20, "outline")data-icon="set-position" data-icon-variant="20-outline"@include icon(glyph(station), 20, "outline")data-icon="station" data-icon-variant="20-outline"@include icon(glyph(train-station), 20, "outline")data-icon="train-station" data-icon-variant="20-outline"@include icon(glyph(arrow-back), 20, "outline")data-icon="arrow-back" data-icon-variant="20-outline"@include icon(glyph(arrow-down), 20, "outline")data-icon="arrow-down" data-icon-variant="20-outline"@include icon(glyph(arrow-forward), 20, "outline")data-icon="arrow-forward" data-icon-variant="20-outline"@include icon(glyph(arrow-up), 20, "outline")data-icon="arrow-up" data-icon-variant="20-outline"@include icon(glyph(cancel), 20, "outline")data-icon="cancel" data-icon-variant="20-outline"@include icon(glyph(chevron-left), 20, "outline")data-icon="chevron-left" data-icon-variant="20-outline"@include icon(glyph(chevron-right), 20, "outline")data-icon="chevron-right" data-icon-variant="20-outline"@include icon(glyph(close), 20, "outline")data-icon="close" data-icon-variant="20-outline"@include icon(glyph(expand-less), 20, "outline")data-icon="expand-less" data-icon-variant="20-outline"@include icon(glyph(expand-more), 20, "outline")data-icon="expand-more" data-icon-variant="20-outline"@include icon(glyph(fullscreen), 20, "outline")data-icon="fullscreen" data-icon-variant="20-outline"@include icon(glyph(fullscreen-exit), 20, "outline")data-icon="fullscreen-exit" data-icon-variant="20-outline"@include icon(glyph(grid-view), 20, "outline")data-icon="grid-view" data-icon-variant="20-outline"@include icon(glyph(link), 20, "outline")data-icon="link" data-icon-variant="20-outline"@include icon(glyph(link-external), 20, "outline")data-icon="link-external" data-icon-variant="20-outline"@include icon(glyph(list), 20, "outline")data-icon="list" data-icon-variant="20-outline"@include icon(glyph(menu), 20, "outline")data-icon="menu" data-icon-variant="20-outline"@include icon(glyph(more-horizontal), 20, "outline")data-icon="more-horizontal" data-icon-variant="20-outline"@include icon(glyph(more-vertical), 20, "outline")data-icon="more-vertical" data-icon-variant="20-outline"@include icon(glyph(refresh), 20, "outline")data-icon="refresh" data-icon-variant="20-outline"@include icon(glyph(error), 20, "outline")data-icon="error" data-icon-variant="20-outline"@include icon(glyph(notify), 20, "outline")data-icon="notify" data-icon-variant="20-outline"@include icon(glyph(notify-cutoff), 20, "outline")data-icon="notify-cutoff" data-icon-variant="20-outline"@include icon(glyph(warning), 20, "outline")data-icon="warning" data-icon-variant="20-outline"@include icon(glyph(aisle), 20, "outline")data-icon="aisle" data-icon-variant="20-outline"@include icon(glyph(aisle-not-available), 20, "outline")data-icon="aisle-not-available" data-icon-variant="20-outline"@include icon(glyph(bed), 20, "outline")data-icon="bed" data-icon-variant="20-outline"@include icon(glyph(childrens-compartment), 20, "outline")data-icon="childrens-compartment" data-icon-variant="20-outline"@include icon(glyph(couchette), 20, "outline")data-icon="couchette" data-icon-variant="20-outline"@include icon(glyph(elderly), 20, "outline")data-icon="elderly" data-icon-variant="20-outline"@include icon(glyph(handicapped), 20, "outline")data-icon="handicapped" data-icon-variant="20-outline"@include icon(glyph(parent-child-compartment), 20, "outline")data-icon="parent-child-compartment" data-icon-variant="20-outline"@include icon(glyph(priority), 20, "outline")data-icon="priority" data-icon-variant="20-outline"@include icon(glyph(quiet-zone), 20, "outline")data-icon="quiet-zone" data-icon-variant="20-outline"@include icon(glyph(table), 20, "outline")data-icon="table" data-icon-variant="20-outline"@include icon(glyph(traveler-with-reduced-mobility), 20, "outline")data-icon="traveler-with-reduced-mobility" data-icon-variant="20-outline"@include icon(glyph(window), 20, "outline")data-icon="window" data-icon-variant="20-outline"@include icon(glyph(bahnbonus), 20, "outline")data-icon="bahnbonus" data-icon-variant="20-outline"@include icon(glyph(bahnbonus-card), 20, "outline")data-icon="bahnbonus-card" data-icon-variant="20-outline"@include icon(glyph(bahncard), 20, "outline")data-icon="bahncard" data-icon-variant="20-outline"@include icon(glyph(best-price), 20, "outline")data-icon="best-price" data-icon-variant="20-outline"@include icon(glyph(commuter-ticket), 20, "outline")data-icon="commuter-ticket" data-icon-variant="20-outline"@include icon(glyph(komfort-check-in), 20, "outline")data-icon="komfort-check-in" data-icon-variant="20-outline"@include icon(glyph(komfort-check-in-check), 20, "outline")data-icon="komfort-check-in-check" data-icon-variant="20-outline"@include icon(glyph(komfort-check-in-circle), 20, "outline")data-icon="komfort-check-in-circle" data-icon-variant="20-outline"@include icon(glyph(multiple-cards), 20, "outline")data-icon="multiple-cards" data-icon-variant="20-outline"@include icon(glyph(multiple-passenger), 20, "outline")data-icon="multiple-passenger" data-icon-variant="20-outline"@include icon(glyph(my-travel), 20, "outline")data-icon="my-travel" data-icon-variant="20-outline"@include icon(glyph(outward-journey), 20, "outline")data-icon="outward-journey" data-icon-variant="20-outline"@include icon(glyph(qr-code), 20, "outline")data-icon="qr-code" data-icon-variant="20-outline"@include icon(glyph(qr-code-scan), 20, "outline")data-icon="qr-code-scan" data-icon-variant="20-outline"@include icon(glyph(return-journey), 20, "outline")data-icon="return-journey" data-icon-variant="20-outline"@include icon(glyph(ticket), 20, "outline")data-icon="ticket" data-icon-variant="20-outline"@include icon(glyph(ticket-discount), 20, "outline")data-icon="ticket-discount" data-icon-variant="20-outline"@include icon(glyph(ticket-multiple), 20, "outline")data-icon="ticket-multiple" data-icon-variant="20-outline"@include icon(glyph(ticket-subscription), 20, "outline")data-icon="ticket-subscription" data-icon-variant="20-outline"@include icon(glyph(time-outward-journey), 20, "outline")data-icon="time-outward-journey" data-icon-variant="20-outline"@include icon(glyph(time-return-journey), 20, "outline")data-icon="time-return-journey" data-icon-variant="20-outline"@include icon(glyph(timetable), 20, "outline")data-icon="timetable" data-icon-variant="20-outline"@include icon(glyph(travel-insurance), 20, "outline")data-icon="travel-insurance" data-icon-variant="20-outline"@include icon(glyph(airplane), 20, "outline")data-icon="airplane" data-icon-variant="20-outline"@include icon(glyph(bicycle), 20, "outline")data-icon="bicycle" data-icon-variant="20-outline"@include icon(glyph(bicycle-trailer), 20, "outline")data-icon="bicycle-trailer" data-icon-variant="20-outline"@include icon(glyph(call-a-bike), 20, "outline")data-icon="call-a-bike" data-icon-variant="20-outline"@include icon(glyph(car), 20, "outline")data-icon="car" data-icon-variant="20-outline"@include icon(glyph(carsharing), 20, "outline")data-icon="carsharing" data-icon-variant="20-outline"@include icon(glyph(car-sequence), 20, "outline")data-icon="car-sequence" data-icon-variant="20-outline"@include icon(glyph(electric-locomotive), 20, "outline")data-icon="electric-locomotive" data-icon-variant="20-outline"@include icon(glyph(electric-scooter), 20, "outline")data-icon="electric-scooter" data-icon-variant="20-outline"@include icon(glyph(ev-bus), 20, "outline")data-icon="ev-bus" data-icon-variant="20-outline"@include icon(glyph(ev-car), 20, "outline")data-icon="ev-car" data-icon-variant="20-outline"@include icon(glyph(ev-train), 20, "outline")data-icon="ev-train" data-icon-variant="20-outline"@include icon(glyph(ferry), 20, "outline")data-icon="ferry" data-icon-variant="20-outline"@include icon(glyph(handcart), 20, "outline")data-icon="handcart" data-icon-variant="20-outline"@include icon(glyph(ice), 20, "outline")data-icon="ice" data-icon-variant="20-outline"@include icon(glyph(intercity-train), 20, "outline")data-icon="intercity-train" data-icon-variant="20-outline"@include icon(glyph(ice-side-view), 20, "outline")data-icon="ice-side-view" data-icon-variant="20-outline"@include icon(glyph(local-bus), 20, "outline")data-icon="local-bus" data-icon-variant="20-outline"@include icon(glyph(long-distance-bus), 20, "outline")data-icon="long-distance-bus" data-icon-variant="20-outline"@include icon(glyph(local-train), 20, "outline")data-icon="local-train" data-icon-variant="20-outline"@include icon(glyph(rail-and-fly), 20, "outline")data-icon="rail-and-fly" data-icon-variant="20-outline"@include icon(glyph(railroad-car), 20, "outline")data-icon="railroad-car" data-icon-variant="20-outline"@include icon(glyph(s-bahn), 20, "outline")data-icon="s-bahn" data-icon-variant="20-outline"@include icon(glyph(scooter), 20, "outline")data-icon="scooter" data-icon-variant="20-outline"@include icon(glyph(sev), 20, "outline")data-icon="sev" data-icon-variant="20-outline"@include icon(glyph(speedboat), 20, "outline")data-icon="speedboat" data-icon-variant="20-outline"@include icon(glyph(sprinter), 20, "outline")data-icon="sprinter" data-icon-variant="20-outline"@include icon(glyph(subway), 20, "outline")data-icon="subway" data-icon-variant="20-outline"@include icon(glyph(taxi), 20, "outline")data-icon="taxi" data-icon-variant="20-outline"@include icon(glyph(train-and-car), 20, "outline")data-icon="train-and-car" data-icon-variant="20-outline"@include icon(glyph(tram), 20, "outline")data-icon="tram" data-icon-variant="20-outline"@include icon(glyph(walking), 20, "outline")data-icon="walking" data-icon-variant="20-outline"@include icon(glyph(walking-fast), 20, "outline")data-icon="walking-fast" data-icon-variant="20-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(add-circle)) or @include icon(glyph(add-circle), 24, "filled")data-icon="add-circle" or data-icon="add-circle" data-icon-variant="24-filled"@include icon(glyph(alert)) or @include icon(glyph(alert), 24, "filled")data-icon="alert" or data-icon="alert" data-icon-variant="24-filled"@include icon(glyph(bookmark)) or @include icon(glyph(bookmark), 24, "filled")data-icon="bookmark" or data-icon="bookmark" data-icon-variant="24-filled"@include icon(glyph(camera)) or @include icon(glyph(camera), 24, "filled")data-icon="camera" or data-icon="camera" data-icon-variant="24-filled"@include icon(glyph(check-circle)) or @include icon(glyph(check-circle), 24, "filled")data-icon="check-circle" or data-icon="check-circle" data-icon-variant="24-filled"@include icon(glyph(cloud)) or @include icon(glyph(cloud), 24, "filled")data-icon="cloud" or data-icon="cloud" data-icon-variant="24-filled"@include icon(glyph(heart)) or @include icon(glyph(heart), 24, "filled")data-icon="heart" or data-icon="heart" data-icon-variant="24-filled"@include icon(glyph(help)) or @include icon(glyph(help), 24, "filled")data-icon="help" or data-icon="help" data-icon-variant="24-filled"@include icon(glyph(info)) or @include icon(glyph(info), 24, "filled")data-icon="info" or data-icon="info" data-icon-variant="24-filled"@include icon(glyph(pin)) or @include icon(glyph(pin), 24, "filled")data-icon="pin" or data-icon="pin" data-icon-variant="24-filled"@include icon(glyph(remove)) or @include icon(glyph(remove), 24, "filled")data-icon="remove" or data-icon="remove" data-icon-variant="24-filled"@include icon(glyph(star)) or @include icon(glyph(star), 24, "filled")data-icon="star" or data-icon="star" data-icon-variant="24-filled"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(fast-backward)) or @include icon(glyph(fast-backward), 24, "filled")data-icon="fast-backward" or data-icon="fast-backward" data-icon-variant="24-filled"@include icon(glyph(fast-forward)) or @include icon(glyph(fast-forward), 24, "filled")data-icon="fast-forward" or data-icon="fast-forward" data-icon-variant="24-filled"@include icon(glyph(microphone)) or @include icon(glyph(microphone), 24, "filled")data-icon="microphone" or data-icon="microphone" data-icon-variant="24-filled"@include icon(glyph(play)) or @include icon(glyph(play), 24, "filled")data-icon="play" or data-icon="play" data-icon-variant="24-filled"@include icon(glyph(skip-backward)) or @include icon(glyph(skip-backward), 24, "filled")data-icon="skip-backward" or data-icon="skip-backward" data-icon-variant="24-filled"@include icon(glyph(skip-forward)) or @include icon(glyph(skip-forward), 24, "filled")data-icon="skip-forward" or data-icon="skip-forward" data-icon-variant="24-filled"@include icon(glyph(stop)) or @include icon(glyph(stop), 24, "filled")data-icon="stop" or data-icon="stop" data-icon-variant="24-filled"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(capacity-indicator)) or @include icon(glyph(capacity-indicator), 24, "filled")data-icon="capacity-indicator" or data-icon="capacity-indicator" data-icon-variant="24-filled"@include icon(glyph(capacity-indicator-fully-booked)) or @include icon(glyph(capacity-indicator-fully-booked), 24, "filled")data-icon="capacity-indicator-fully-booked" or data-icon="capacity-indicator-fully-booked" data-icon-variant="24-filled"@include icon(glyph(capacity-indicator-high)) or @include icon(glyph(capacity-indicator-high), 24, "filled")data-icon="capacity-indicator-high" or data-icon="capacity-indicator-high" data-icon-variant="24-filled"@include icon(glyph(capacity-indicator-low)) or @include icon(glyph(capacity-indicator-low), 24, "filled")data-icon="capacity-indicator-low" or data-icon="capacity-indicator-low" data-icon-variant="24-filled"@include icon(glyph(destination)) or @include icon(glyph(destination), 24, "filled")data-icon="destination" or data-icon="destination" data-icon-variant="24-filled"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(gps)) or @include icon(glyph(gps), 24, "filled")data-icon="gps" or data-icon="gps" data-icon-variant="24-filled"@include icon(glyph(gps-north)) or @include icon(glyph(gps-north), 24, "filled")data-icon="gps-north" or data-icon="gps-north" data-icon-variant="24-filled"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(cancel)) or @include icon(glyph(cancel), 24, "filled")data-icon="cancel" or data-icon="cancel" data-icon-variant="24-filled"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(error)) or @include icon(glyph(error), 24, "filled")data-icon="error" or data-icon="error" data-icon-variant="24-filled"@include icon(glyph(warning)) or @include icon(glyph(warning), 24, "filled")data-icon="warning" or data-icon="warning" data-icon-variant="24-filled"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (filled) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(airplane)) or @include icon(glyph(airplane), 24, "filled")data-icon="airplane" or data-icon="airplane" data-icon-variant="24-filled"@include icon(glyph(bicycle)) or @include icon(glyph(bicycle), 24, "filled")data-icon="bicycle" or data-icon="bicycle" data-icon-variant="24-filled"@include icon(glyph(bicycle-trailer)) or @include icon(glyph(bicycle-trailer), 24, "filled")data-icon="bicycle-trailer" or data-icon="bicycle-trailer" data-icon-variant="24-filled"@include icon(glyph(call-a-bike)) or @include icon(glyph(call-a-bike), 24, "filled")data-icon="call-a-bike" or data-icon="call-a-bike" data-icon-variant="24-filled"@include icon(glyph(car)) or @include icon(glyph(car), 24, "filled")data-icon="car" or data-icon="car" data-icon-variant="24-filled"@include icon(glyph(carsharing)) or @include icon(glyph(carsharing), 24, "filled")data-icon="carsharing" or data-icon="carsharing" data-icon-variant="24-filled"@include icon(glyph(electric-locomotive)) or @include icon(glyph(electric-locomotive), 24, "filled")data-icon="electric-locomotive" or data-icon="electric-locomotive" data-icon-variant="24-filled"@include icon(glyph(electric-scooter)) or @include icon(glyph(electric-scooter), 24, "filled")data-icon="electric-scooter" or data-icon="electric-scooter" data-icon-variant="24-filled"@include icon(glyph(ev-car)) or @include icon(glyph(ev-car), 24, "filled")data-icon="ev-car" or data-icon="ev-car" data-icon-variant="24-filled"@include icon(glyph(ferry)) or @include icon(glyph(ferry), 24, "filled")data-icon="ferry" or data-icon="ferry" data-icon-variant="24-filled"@include icon(glyph(handcart)) or @include icon(glyph(handcart), 24, "filled")data-icon="handcart" or data-icon="handcart" data-icon-variant="24-filled"@include icon(glyph(ice)) or @include icon(glyph(ice), 24, "filled")data-icon="ice" or data-icon="ice" data-icon-variant="24-filled"@include icon(glyph(intercity-train)) or @include icon(glyph(intercity-train), 24, "filled")data-icon="intercity-train" or data-icon="intercity-train" data-icon-variant="24-filled"@include icon(glyph(local-bus)) or @include icon(glyph(local-bus), 24, "filled")data-icon="local-bus" or data-icon="local-bus" data-icon-variant="24-filled"@include icon(glyph(long-distance-bus)) or @include icon(glyph(long-distance-bus), 24, "filled")data-icon="long-distance-bus" or data-icon="long-distance-bus" data-icon-variant="24-filled"@include icon(glyph(local-train)) or @include icon(glyph(local-train), 24, "filled")data-icon="local-train" or data-icon="local-train" data-icon-variant="24-filled"@include icon(glyph(s-bahn)) or @include icon(glyph(s-bahn), 24, "filled")data-icon="s-bahn" or data-icon="s-bahn" data-icon-variant="24-filled"@include icon(glyph(scooter)) or @include icon(glyph(scooter), 24, "filled")data-icon="scooter" or data-icon="scooter" data-icon-variant="24-filled"@include icon(glyph(speedboat)) or @include icon(glyph(speedboat), 24, "filled")data-icon="speedboat" or data-icon="speedboat" data-icon-variant="24-filled"@include icon(glyph(subway)) or @include icon(glyph(subway), 24, "filled")data-icon="subway" or data-icon="subway" data-icon-variant="24-filled"@include icon(glyph(taxi)) or @include icon(glyph(taxi), 24, "filled")data-icon="taxi" or data-icon="taxi" data-icon-variant="24-filled"@include icon(glyph(train-and-car)) or @include icon(glyph(train-and-car), 24, "filled")data-icon="train-and-car" or data-icon="train-and-car" data-icon-variant="24-filled"@include icon(glyph(tram)) or @include icon(glyph(tram), 24, "filled")data-icon="tram" or data-icon="tram" data-icon-variant="24-filled"@include icon(glyph(walking)) or @include icon(glyph(walking), 24, "filled")data-icon="walking" or data-icon="walking" data-icon-variant="24-filled"@include icon(glyph(walking-fast)) or @include icon(glyph(walking-fast), 24, "filled")data-icon="walking-fast" or data-icon="walking-fast" data-icon-variant="24-filled"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(account)) or @include icon(glyph(account), 24, "outline")data-icon="account" or data-icon="account" data-icon-variant="24-outline"@include icon(glyph(add)) or @include icon(glyph(add), 24, "outline")data-icon="add" or data-icon="add" data-icon-variant="24-outline"@include icon(glyph(add-circle)) or @include icon(glyph(add-circle), 24, "outline")data-icon="add-circle" or data-icon="add-circle" data-icon-variant="24-outline"@include icon(glyph(add-link)) or @include icon(glyph(add-link), 24, "outline")data-icon="add-link" or data-icon="add-link" data-icon-variant="24-outline"@include icon(glyph(alarm)) or @include icon(glyph(alarm), 24, "outline")data-icon="alarm" or data-icon="alarm" data-icon-variant="24-outline"@include icon(glyph(alarm-add)) or @include icon(glyph(alarm-add), 24, "outline")data-icon="alarm-add" or data-icon="alarm-add" data-icon-variant="24-outline"@include icon(glyph(alert)) or @include icon(glyph(alert), 24, "outline")data-icon="alert" or data-icon="alert" data-icon-variant="24-outline"@include icon(glyph(alert-off)) or @include icon(glyph(alert-off), 24, "outline")data-icon="alert-off" or data-icon="alert-off" data-icon-variant="24-outline"@include icon(glyph(artificial-intelligence)) or @include icon(glyph(artificial-intelligence), 24, "outline")data-icon="artificial-intelligence" or data-icon="artificial-intelligence" data-icon-variant="24-outline"@include icon(glyph(attachment)) or @include icon(glyph(attachment), 24, "outline")data-icon="attachment" or data-icon="attachment" data-icon-variant="24-outline"@include icon(glyph(augmented-reality)) or @include icon(glyph(augmented-reality), 24, "outline")data-icon="augmented-reality" or data-icon="augmented-reality" data-icon-variant="24-outline"@include icon(glyph(block)) or @include icon(glyph(block), 24, "outline")data-icon="block" or data-icon="block" data-icon-variant="24-outline"@include icon(glyph(bookmark)) or @include icon(glyph(bookmark), 24, "outline")data-icon="bookmark" or data-icon="bookmark" data-icon-variant="24-outline"@include icon(glyph(bug)) or @include icon(glyph(bug), 24, "outline")data-icon="bug" or data-icon="bug" data-icon-variant="24-outline"@include icon(glyph(build)) or @include icon(glyph(build), 24, "outline")data-icon="build" or data-icon="build" data-icon-variant="24-outline"@include icon(glyph(calendar)) or @include icon(glyph(calendar), 24, "outline")data-icon="calendar" or data-icon="calendar" data-icon-variant="24-outline"@include icon(glyph(camera)) or @include icon(glyph(camera), 24, "outline")data-icon="camera" or data-icon="camera" data-icon-variant="24-outline"@include icon(glyph(cash)) or @include icon(glyph(cash), 24, "outline")data-icon="cash" or data-icon="cash" data-icon-variant="24-outline"@include icon(glyph(check-circle)) or @include icon(glyph(check-circle), 24, "outline")data-icon="check-circle" or data-icon="check-circle" data-icon-variant="24-outline"@include icon(glyph(cloud)) or @include icon(glyph(cloud), 24, "outline")data-icon="cloud" or data-icon="cloud" data-icon-variant="24-outline"@include icon(glyph(cloud-download)) or @include icon(glyph(cloud-download), 24, "outline")data-icon="cloud-download" or data-icon="cloud-download" data-icon-variant="24-outline"@include icon(glyph(cloud-upload)) or @include icon(glyph(cloud-upload), 24, "outline")data-icon="cloud-upload" or data-icon="cloud-upload" data-icon-variant="24-outline"@include icon(glyph(compass)) or @include icon(glyph(compass), 24, "outline")data-icon="compass" or data-icon="compass" data-icon-variant="24-outline"@include icon(glyph(copy)) or @include icon(glyph(copy), 24, "outline")data-icon="copy" or data-icon="copy" data-icon-variant="24-outline"@include icon(glyph(credit-card)) or @include icon(glyph(credit-card), 24, "outline")data-icon="credit-card" or data-icon="credit-card" data-icon-variant="24-outline"@include icon(glyph(dashboard)) or @include icon(glyph(dashboard), 24, "outline")data-icon="dashboard" or data-icon="dashboard" data-icon-variant="24-outline"@include icon(glyph(delete)) or @include icon(glyph(delete), 24, "outline")data-icon="delete" or data-icon="delete" data-icon-variant="24-outline"@include icon(glyph(discount)) or @include icon(glyph(discount), 24, "outline")data-icon="discount" or data-icon="discount" data-icon-variant="24-outline"@include icon(glyph(document)) or @include icon(glyph(document), 24, "outline")data-icon="document" or data-icon="document" data-icon-variant="24-outline"@include icon(glyph(document-check)) or @include icon(glyph(document-check), 24, "outline")data-icon="document-check" or data-icon="document-check" data-icon-variant="24-outline"@include icon(glyph(document-cross)) or @include icon(glyph(document-cross), 24, "outline")data-icon="document-cross" or data-icon="document-cross" data-icon-variant="24-outline"@include icon(glyph(done)) or @include icon(glyph(done), 24, "outline")data-icon="done" or data-icon="done" data-icon-variant="24-outline"@include icon(glyph(download)) or @include icon(glyph(download), 24, "outline")data-icon="download" or data-icon="download" data-icon-variant="24-outline"@include icon(glyph(drag-and-drop)) or @include icon(glyph(drag-and-drop), 24, "outline")data-icon="drag-and-drop" or data-icon="drag-and-drop" data-icon-variant="24-outline"@include icon(glyph(edit)) or @include icon(glyph(edit), 24, "outline")data-icon="edit" or data-icon="edit" data-icon-variant="24-outline"@include icon(glyph(euro-sign)) or @include icon(glyph(euro-sign), 24, "outline")data-icon="euro-sign" or data-icon="euro-sign" data-icon-variant="24-outline"@include icon(glyph(face-delighted)) or @include icon(glyph(face-delighted), 24, "outline")data-icon="face-delighted" or data-icon="face-delighted" data-icon-variant="24-outline"@include icon(glyph(face-disappointed)) or @include icon(glyph(face-disappointed), 24, "outline")data-icon="face-disappointed" or data-icon="face-disappointed" data-icon-variant="24-outline"@include icon(glyph(face-neutral)) or @include icon(glyph(face-neutral), 24, "outline")data-icon="face-neutral" or data-icon="face-neutral" data-icon-variant="24-outline"@include icon(glyph(face-sad)) or @include icon(glyph(face-sad), 24, "outline")data-icon="face-sad" or data-icon="face-sad" data-icon-variant="24-outline"@include icon(glyph(face-smiling)) or @include icon(glyph(face-smiling), 24, "outline")data-icon="face-smiling" or data-icon="face-smiling" data-icon-variant="24-outline"@include icon(glyph(filter)) or @include icon(glyph(filter), 24, "outline")data-icon="filter" or data-icon="filter" data-icon-variant="24-outline"@include icon(glyph(fingerprint)) or @include icon(glyph(fingerprint), 24, "outline")data-icon="fingerprint" or data-icon="fingerprint" data-icon-variant="24-outline"@include icon(glyph(folder)) or @include icon(glyph(folder), 24, "outline")data-icon="folder" or data-icon="folder" data-icon-variant="24-outline"@include icon(glyph(folder-open)) or @include icon(glyph(folder-open), 24, "outline")data-icon="folder-open" or data-icon="folder-open" data-icon-variant="24-outline"@include icon(glyph(generic-card)) or @include icon(glyph(generic-card), 24, "outline")data-icon="generic-card" or data-icon="generic-card" data-icon-variant="24-outline"@include icon(glyph(giftcard)) or @include icon(glyph(giftcard), 24, "outline")data-icon="giftcard" or data-icon="giftcard" data-icon-variant="24-outline"@include icon(glyph(hearing)) or @include icon(glyph(hearing), 24, "outline")data-icon="hearing" or data-icon="hearing" data-icon-variant="24-outline"@include icon(glyph(hearing-disabled)) or @include icon(glyph(hearing-disabled), 24, "outline")data-icon="hearing-disabled" or data-icon="hearing-disabled" data-icon-variant="24-outline"@include icon(glyph(heart)) or @include icon(glyph(heart), 24, "outline")data-icon="heart" or data-icon="heart" data-icon-variant="24-outline"@include icon(glyph(help)) or @include icon(glyph(help), 24, "outline")data-icon="help" or data-icon="help" data-icon-variant="24-outline"@include icon(glyph(id-card)) or @include icon(glyph(id-card), 24, "outline")data-icon="id-card" or data-icon="id-card" data-icon-variant="24-outline"@include icon(glyph(image)) or @include icon(glyph(image), 24, "outline")data-icon="image" or data-icon="image" data-icon-variant="24-outline"@include icon(glyph(info)) or @include icon(glyph(info), 24, "outline")data-icon="info" or data-icon="info" data-icon-variant="24-outline"@include icon(glyph(key)) or @include icon(glyph(key), 24, "outline")data-icon="key" or data-icon="key" data-icon-variant="24-outline"@include icon(glyph(legal)) or @include icon(glyph(legal), 24, "outline")data-icon="legal" or data-icon="legal" data-icon-variant="24-outline"@include icon(glyph(lightbulb)) or @include icon(glyph(lightbulb), 24, "outline")data-icon="lightbulb" or data-icon="lightbulb" data-icon-variant="24-outline"@include icon(glyph(lock-close)) or @include icon(glyph(lock-close), 24, "outline")data-icon="lock-close" or data-icon="lock-close" data-icon-variant="24-outline"@include icon(glyph(lock-open)) or @include icon(glyph(lock-open), 24, "outline")data-icon="lock-open" or data-icon="lock-open" data-icon-variant="24-outline"@include icon(glyph(log-out)) or @include icon(glyph(log-out), 24, "outline")data-icon="log-out" or data-icon="log-out" data-icon-variant="24-outline"@include icon(glyph(logbook)) or @include icon(glyph(logbook), 24, "outline")data-icon="logbook" or data-icon="logbook" data-icon-variant="24-outline"@include icon(glyph(minus)) or @include icon(glyph(minus), 24, "outline")data-icon="minus" or data-icon="minus" data-icon-variant="24-outline"@include icon(glyph(piggybank)) or @include icon(glyph(piggybank), 24, "outline")data-icon="piggybank" or data-icon="piggybank" data-icon-variant="24-outline"@include icon(glyph(pin)) or @include icon(glyph(pin), 24, "outline")data-icon="pin" or data-icon="pin" data-icon-variant="24-outline"@include icon(glyph(print)) or @include icon(glyph(print), 24, "outline")data-icon="print" or data-icon="print" data-icon-variant="24-outline"@include icon(glyph(pulse-wave)) or @include icon(glyph(pulse-wave), 24, "outline")data-icon="pulse-wave" or data-icon="pulse-wave" data-icon-variant="24-outline"@include icon(glyph(push-button)) or @include icon(glyph(push-button), 24, "outline")data-icon="push-button" or data-icon="push-button" data-icon-variant="24-outline"@include icon(glyph(remove)) or @include icon(glyph(remove), 24, "outline")data-icon="remove" or data-icon="remove" data-icon-variant="24-outline"@include icon(glyph(resize)) or @include icon(glyph(resize), 24, "outline")data-icon="resize" or data-icon="resize" data-icon-variant="24-outline"@include icon(glyph(resize-handle-corner)) or @include icon(glyph(resize-handle-corner), 24, "outline")data-icon="resize-handle-corner" or data-icon="resize-handle-corner" data-icon-variant="24-outline"@include icon(glyph(save)) or @include icon(glyph(save), 24, "outline")data-icon="save" or data-icon="save" data-icon-variant="24-outline"@include icon(glyph(schedule)) or @include icon(glyph(schedule), 24, "outline")data-icon="schedule" or data-icon="schedule" data-icon-variant="24-outline"@include icon(glyph(search)) or @include icon(glyph(search), 24, "outline")data-icon="search" or data-icon="search" data-icon-variant="24-outline"@include icon(glyph(send)) or @include icon(glyph(send), 24, "outline")data-icon="send" or data-icon="send" data-icon-variant="24-outline"@include icon(glyph(sepa)) or @include icon(glyph(sepa), 24, "outline")data-icon="sepa" or data-icon="sepa" data-icon-variant="24-outline"@include icon(glyph(settings)) or @include icon(glyph(settings), 24, "outline")data-icon="settings" or data-icon="settings" data-icon-variant="24-outline"@include icon(glyph(share)) or @include icon(glyph(share), 24, "outline")data-icon="share" or data-icon="share" data-icon-variant="24-outline"@include icon(glyph(shopping-bag)) or @include icon(glyph(shopping-bag), 24, "outline")data-icon="shopping-bag" or data-icon="shopping-bag" data-icon-variant="24-outline"@include icon(glyph(shopping-basket)) or @include icon(glyph(shopping-basket), 24, "outline")data-icon="shopping-basket" or data-icon="shopping-basket" data-icon-variant="24-outline"@include icon(glyph(shopping-basket-disabled)) or @include icon(glyph(shopping-basket-disabled), 24, "outline")data-icon="shopping-basket-disabled" or data-icon="shopping-basket-disabled" data-icon-variant="24-outline"@include icon(glyph(shopping-cart)) or @include icon(glyph(shopping-cart), 24, "outline")data-icon="shopping-cart" or data-icon="shopping-cart" data-icon-variant="24-outline"@include icon(glyph(shopping-cart-disabled)) or @include icon(glyph(shopping-cart-disabled), 24, "outline")data-icon="shopping-cart-disabled" or data-icon="shopping-cart-disabled" data-icon-variant="24-outline"@include icon(glyph(sort-down)) or @include icon(glyph(sort-down), 24, "outline")data-icon="sort-down" or data-icon="sort-down" data-icon-variant="24-outline"@include icon(glyph(sort-up)) or @include icon(glyph(sort-up), 24, "outline")data-icon="sort-up" or data-icon="sort-up" data-icon-variant="24-outline"@include icon(glyph(star)) or @include icon(glyph(star), 24, "outline")data-icon="star" or data-icon="star" data-icon-variant="24-outline"@include icon(glyph(swap-horizontal)) or @include icon(glyph(swap-horizontal), 24, "outline")data-icon="swap-horizontal" or data-icon="swap-horizontal" data-icon-variant="24-outline"@include icon(glyph(swap-vertical)) or @include icon(glyph(swap-vertical), 24, "outline")data-icon="swap-vertical" or data-icon="swap-vertical" data-icon-variant="24-outline"@include icon(glyph(thumb-up)) or @include icon(glyph(thumb-up), 24, "outline")data-icon="thumb-up" or data-icon="thumb-up" data-icon-variant="24-outline"@include icon(glyph(thumb-up-down)) or @include icon(glyph(thumb-up-down), 24, "outline")data-icon="thumb-up-down" or data-icon="thumb-up-down" data-icon-variant="24-outline"@include icon(glyph(translation)) or @include icon(glyph(translation), 24, "outline")data-icon="translation" or data-icon="translation" data-icon-variant="24-outline"@include icon(glyph(undo)) or @include icon(glyph(undo), 24, "outline")data-icon="undo" or data-icon="undo" data-icon-variant="24-outline"@include icon(glyph(upload)) or @include icon(glyph(upload), 24, "outline")data-icon="upload" or data-icon="upload" data-icon-variant="24-outline"@include icon(glyph(visibility)) or @include icon(glyph(visibility), 24, "outline")data-icon="visibility" or data-icon="visibility" data-icon-variant="24-outline"@include icon(glyph(visibility-off)) or @include icon(glyph(visibility-off), 24, "outline")data-icon="visibility-off" or data-icon="visibility-off" data-icon-variant="24-outline"@include icon(glyph(voucher)) or @include icon(glyph(voucher), 24, "outline")data-icon="voucher" or data-icon="voucher" data-icon-variant="24-outline"@include icon(glyph(website)) or @include icon(glyph(website), 24, "outline")data-icon="website" or data-icon="website" data-icon-variant="24-outline"@include icon(glyph(zoom-in)) or @include icon(glyph(zoom-in), 24, "outline")data-icon="zoom-in" or data-icon="zoom-in" data-icon-variant="24-outline"@include icon(glyph(zoom-out)) or @include icon(glyph(zoom-out), 24, "outline")data-icon="zoom-out" or data-icon="zoom-out" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(clapperboard)) or @include icon(glyph(clapperboard), 24, "outline")data-icon="clapperboard" or data-icon="clapperboard" data-icon-variant="24-outline"@include icon(glyph(fast-backward)) or @include icon(glyph(fast-backward), 24, "outline")data-icon="fast-backward" or data-icon="fast-backward" data-icon-variant="24-outline"@include icon(glyph(fast-backward-10)) or @include icon(glyph(fast-backward-10), 24, "outline")data-icon="fast-backward-10" or data-icon="fast-backward-10" data-icon-variant="24-outline"@include icon(glyph(fast-backward-30)) or @include icon(glyph(fast-backward-30), 24, "outline")data-icon="fast-backward-30" or data-icon="fast-backward-30" data-icon-variant="24-outline"@include icon(glyph(fast-backward-empty)) or @include icon(glyph(fast-backward-empty), 24, "outline")data-icon="fast-backward-empty" or data-icon="fast-backward-empty" data-icon-variant="24-outline"@include icon(glyph(fast-forward)) or @include icon(glyph(fast-forward), 24, "outline")data-icon="fast-forward" or data-icon="fast-forward" data-icon-variant="24-outline"@include icon(glyph(fast-forward-10)) or @include icon(glyph(fast-forward-10), 24, "outline")data-icon="fast-forward-10" or data-icon="fast-forward-10" data-icon-variant="24-outline"@include icon(glyph(fast-forward-30)) or @include icon(glyph(fast-forward-30), 24, "outline")data-icon="fast-forward-30" or data-icon="fast-forward-30" data-icon-variant="24-outline"@include icon(glyph(fast-forward-empty)) or @include icon(glyph(fast-forward-empty), 24, "outline")data-icon="fast-forward-empty" or data-icon="fast-forward-empty" data-icon-variant="24-outline"@include icon(glyph(microphone)) or @include icon(glyph(microphone), 24, "outline")data-icon="microphone" or data-icon="microphone" data-icon-variant="24-outline"@include icon(glyph(pause)) or @include icon(glyph(pause), 24, "outline")data-icon="pause" or data-icon="pause" data-icon-variant="24-outline"@include icon(glyph(play)) or @include icon(glyph(play), 24, "outline")data-icon="play" or data-icon="play" data-icon-variant="24-outline"@include icon(glyph(skip-backward)) or @include icon(glyph(skip-backward), 24, "outline")data-icon="skip-backward" or data-icon="skip-backward" data-icon-variant="24-outline"@include icon(glyph(skip-forward)) or @include icon(glyph(skip-forward), 24, "outline")data-icon="skip-forward" or data-icon="skip-forward" data-icon-variant="24-outline"@include icon(glyph(stop)) or @include icon(glyph(stop), 24, "outline")data-icon="stop" or data-icon="stop" data-icon-variant="24-outline"@include icon(glyph(subtitles)) or @include icon(glyph(subtitles), 24, "outline")data-icon="subtitles" or data-icon="subtitles" data-icon-variant="24-outline"@include icon(glyph(volume-down)) or @include icon(glyph(volume-down), 24, "outline")data-icon="volume-down" or data-icon="volume-down" data-icon-variant="24-outline"@include icon(glyph(volume-mute)) or @include icon(glyph(volume-mute), 24, "outline")data-icon="volume-mute" or data-icon="volume-mute" data-icon-variant="24-outline"@include icon(glyph(volume-off)) or @include icon(glyph(volume-off), 24, "outline")data-icon="volume-off" or data-icon="volume-off" data-icon-variant="24-outline"@include icon(glyph(volume-up)) or @include icon(glyph(volume-up), 24, "outline")data-icon="volume-up" or data-icon="volume-up" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(logo)) or @include icon(glyph(logo), 24, "outline")data-icon="logo" or data-icon="logo" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(call)) or @include icon(glyph(call), 24, "outline")data-icon="call" or data-icon="call" data-icon-variant="24-outline"@include icon(glyph(chat)) or @include icon(glyph(chat), 24, "outline")data-icon="chat" or data-icon="chat" data-icon-variant="24-outline"@include icon(glyph(conversation)) or @include icon(glyph(conversation), 24, "outline")data-icon="conversation" or data-icon="conversation" data-icon-variant="24-outline"@include icon(glyph(fax)) or @include icon(glyph(fax), 24, "outline")data-icon="fax" or data-icon="fax" data-icon-variant="24-outline"@include icon(glyph(feedback)) or @include icon(glyph(feedback), 24, "outline")data-icon="feedback" or data-icon="feedback" data-icon-variant="24-outline"@include icon(glyph(mail)) or @include icon(glyph(mail), 24, "outline")data-icon="mail" or data-icon="mail" data-icon-variant="24-outline"@include icon(glyph(mobile-phone)) or @include icon(glyph(mobile-phone), 24, "outline")data-icon="mobile-phone" or data-icon="mobile-phone" data-icon-variant="24-outline"@include icon(glyph(mobile-off)) or @include icon(glyph(mobile-off), 24, "outline")data-icon="mobile-off" or data-icon="mobile-off" data-icon-variant="24-outline"@include icon(glyph(question)) or @include icon(glyph(question), 24, "outline")data-icon="question" or data-icon="question" data-icon-variant="24-outline"@include icon(glyph(receive-item)) or @include icon(glyph(receive-item), 24, "outline")data-icon="receive-item" or data-icon="receive-item" data-icon-variant="24-outline"@include icon(glyph(share-item)) or @include icon(glyph(share-item), 24, "outline")data-icon="share-item" or data-icon="share-item" data-icon-variant="24-outline"@include icon(glyph(wifi)) or @include icon(glyph(wifi), 24, "outline")data-icon="wifi" or data-icon="wifi" data-icon-variant="24-outline"@include icon(glyph(wifi-off)) or @include icon(glyph(wifi-off), 24, "outline")data-icon="wifi-off" or data-icon="wifi-off" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(mask)) or @include icon(glyph(mask), 24, "outline")data-icon="mask" or data-icon="mask" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(playground)) or @include icon(glyph(playground), 24, "outline")data-icon="playground" or data-icon="playground" data-icon-variant="24-outline"@include icon(glyph(restricted-mobility-toilet)) or @include icon(glyph(restricted-mobility-toilet), 24, "outline")data-icon="restricted-mobility-toilet" or data-icon="restricted-mobility-toilet" data-icon-variant="24-outline"@include icon(glyph(shower)) or @include icon(glyph(shower), 24, "outline")data-icon="shower" or data-icon="shower" data-icon-variant="24-outline"@include icon(glyph(shower-men)) or @include icon(glyph(shower-men), 24, "outline")data-icon="shower-men" or data-icon="shower-men" data-icon-variant="24-outline"@include icon(glyph(shower-women)) or @include icon(glyph(shower-women), 24, "outline")data-icon="shower-women" or data-icon="shower-women" data-icon-variant="24-outline"@include icon(glyph(sink)) or @include icon(glyph(sink), 24, "outline")data-icon="sink" or data-icon="sink" data-icon-variant="24-outline"@include icon(glyph(wc)) or @include icon(glyph(wc), 24, "outline")data-icon="wc" or data-icon="wc" data-icon-variant="24-outline"@include icon(glyph(wc-men)) or @include icon(glyph(wc-men), 24, "outline")data-icon="wc-men" or data-icon="wc-men" data-icon-variant="24-outline"@include icon(glyph(wc-sign)) or @include icon(glyph(wc-sign), 24, "outline")data-icon="wc-sign" or data-icon="wc-sign" data-icon-variant="24-outline"@include icon(glyph(wc-woman)) or @include icon(glyph(wc-woman), 24, "outline")data-icon="wc-woman" or data-icon="wc-woman" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(air-condition)) or @include icon(glyph(air-condition), 24, "outline")data-icon="air-condition" or data-icon="air-condition" data-icon-variant="24-outline"@include icon(glyph(buggy)) or @include icon(glyph(buggy), 24, "outline")data-icon="buggy" or data-icon="buggy" data-icon-variant="24-outline"@include icon(glyph(clothing-hanger)) or @include icon(glyph(clothing-hanger), 24, "outline")data-icon="clothing-hanger" or data-icon="clothing-hanger" data-icon-variant="24-outline"@include icon(glyph(day)) or @include icon(glyph(day), 24, "outline")data-icon="day" or data-icon="day" data-icon-variant="24-outline"@include icon(glyph(dog)) or @include icon(glyph(dog), 24, "outline")data-icon="dog" or data-icon="dog" data-icon-variant="24-outline"@include icon(glyph(entry-aid)) or @include icon(glyph(entry-aid), 24, "outline")data-icon="entry-aid" or data-icon="entry-aid" data-icon-variant="24-outline"@include icon(glyph(environmental-mobility-check)) or @include icon(glyph(environmental-mobility-check), 24, "outline")data-icon="environmental-mobility-check" or data-icon="environmental-mobility-check" data-icon-variant="24-outline"@include icon(glyph(hydrogen)) or @include icon(glyph(hydrogen), 24, "outline")data-icon="hydrogen" or data-icon="hydrogen" data-icon-variant="24-outline"@include icon(glyph(iceportal)) or @include icon(glyph(iceportal), 24, "outline")data-icon="iceportal" or data-icon="iceportal" data-icon-variant="24-outline"@include icon(glyph(luggage-compartment)) or @include icon(glyph(luggage-compartment), 24, "outline")data-icon="luggage-compartment" or data-icon="luggage-compartment" data-icon-variant="24-outline"@include icon(glyph(luggage-rack)) or @include icon(glyph(luggage-rack), 24, "outline")data-icon="luggage-rack" or data-icon="luggage-rack" data-icon-variant="24-outline"@include icon(glyph(marketplace)) or @include icon(glyph(marketplace), 24, "outline")data-icon="marketplace" or data-icon="marketplace" data-icon-variant="24-outline"@include icon(glyph(medical)) or @include icon(glyph(medical), 24, "outline")data-icon="medical" or data-icon="medical" data-icon-variant="24-outline"@include icon(glyph(night)) or @include icon(glyph(night), 24, "outline")data-icon="night" or data-icon="night" data-icon-variant="24-outline"@include icon(glyph(no-smoking)) or @include icon(glyph(no-smoking), 24, "outline")data-icon="no-smoking" or data-icon="no-smoking" data-icon-variant="24-outline"@include icon(glyph(person-with-cane)) or @include icon(glyph(person-with-cane), 24, "outline")data-icon="person-with-cane" or data-icon="person-with-cane" data-icon-variant="24-outline"@include icon(glyph(person-with-rollator)) or @include icon(glyph(person-with-rollator), 24, "outline")data-icon="person-with-rollator" or data-icon="person-with-rollator" data-icon-variant="24-outline"@include icon(glyph(platform)) or @include icon(glyph(platform), 24, "outline")data-icon="platform" or data-icon="platform" data-icon-variant="24-outline"@include icon(glyph(power-outlet)) or @include icon(glyph(power-outlet), 24, "outline")data-icon="power-outlet" or data-icon="power-outlet" data-icon-variant="24-outline"@include icon(glyph(regioguide)) or @include icon(glyph(regioguide), 24, "outline")data-icon="regioguide" or data-icon="regioguide" data-icon-variant="24-outline"@include icon(glyph(reservation)) or @include icon(glyph(reservation), 24, "outline")data-icon="reservation" or data-icon="reservation" data-icon-variant="24-outline"@include icon(glyph(standing-room)) or @include icon(glyph(standing-room), 24, "outline")data-icon="standing-room" or data-icon="standing-room" data-icon-variant="24-outline"@include icon(glyph(steppless-entry)) or @include icon(glyph(steppless-entry), 24, "outline")data-icon="steppless-entry" or data-icon="steppless-entry" data-icon-variant="24-outline"@include icon(glyph(support-dog)) or @include icon(glyph(support-dog), 24, "outline")data-icon="support-dog" or data-icon="support-dog" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(breakfast)) or @include icon(glyph(breakfast), 24, "outline")data-icon="breakfast" or data-icon="breakfast" data-icon-variant="24-outline"@include icon(glyph(coffee-cup)) or @include icon(glyph(coffee-cup), 24, "outline")data-icon="coffee-cup" or data-icon="coffee-cup" data-icon-variant="24-outline"@include icon(glyph(drink)) or @include icon(glyph(drink), 24, "outline")data-icon="drink" or data-icon="drink" data-icon-variant="24-outline"@include icon(glyph(restaurant)) or @include icon(glyph(restaurant), 24, "outline")data-icon="restaurant" or data-icon="restaurant" data-icon-variant="24-outline"@include icon(glyph(database), 24, "outline")data-icon="database" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(1st-class)) or @include icon(glyph(1st-class), 24, "outline")data-icon="1st-class" or data-icon="1st-class" data-icon-variant="24-outline"@include icon(glyph(2nd-class)) or @include icon(glyph(2nd-class), 24, "outline")data-icon="2nd-class" or data-icon="2nd-class" data-icon-variant="24-outline"@include icon(glyph(alternative-connection)) or @include icon(glyph(alternative-connection), 24, "outline")data-icon="alternative-connection" or data-icon="alternative-connection" data-icon-variant="24-outline"@include icon(glyph(booking)) or @include icon(glyph(booking), 24, "outline")data-icon="booking" or data-icon="booking" data-icon-variant="24-outline"@include icon(glyph(capacity-indicator)) or @include icon(glyph(capacity-indicator), 24, "outline")data-icon="capacity-indicator" or data-icon="capacity-indicator" data-icon-variant="24-outline"@include icon(glyph(capacity-indicator-fully-booked)) or @include icon(glyph(capacity-indicator-fully-booked), 24, "outline")data-icon="capacity-indicator-fully-booked" or data-icon="capacity-indicator-fully-booked" data-icon-variant="24-outline"@include icon(glyph(capacity-indicator-high)) or @include icon(glyph(capacity-indicator-high), 24, "outline")data-icon="capacity-indicator-high" or data-icon="capacity-indicator-high" data-icon-variant="24-outline"@include icon(glyph(capacity-indicator-low)) or @include icon(glyph(capacity-indicator-low), 24, "outline")data-icon="capacity-indicator-low" or data-icon="capacity-indicator-low" data-icon-variant="24-outline"@include icon(glyph(destination)) or @include icon(glyph(destination), 24, "outline")data-icon="destination" or data-icon="destination" data-icon-variant="24-outline"@include icon(glyph(intermediary-stop)) or @include icon(glyph(intermediary-stop), 24, "outline")data-icon="intermediary-stop" or data-icon="intermediary-stop" data-icon-variant="24-outline"@include icon(glyph(mixed-class)) or @include icon(glyph(mixed-class), 24, "outline")data-icon="mixed-class" or data-icon="mixed-class" data-icon-variant="24-outline"@include icon(glyph(round-trip)) or @include icon(glyph(round-trip), 24, "outline")data-icon="round-trip" or data-icon="round-trip" data-icon-variant="24-outline"@include icon(glyph(single-trip)) or @include icon(glyph(single-trip), 24, "outline")data-icon="single-trip" or data-icon="single-trip" data-icon-variant="24-outline"@include icon(glyph(start)) or @include icon(glyph(start), 24, "outline")data-icon="start" or data-icon="start" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(gps)) or @include icon(glyph(gps), 24, "outline")data-icon="gps" or data-icon="gps" data-icon-variant="24-outline"@include icon(glyph(gps-north)) or @include icon(glyph(gps-north), 24, "outline")data-icon="gps-north" or data-icon="gps-north" data-icon-variant="24-outline"@include icon(glyph(home)) or @include icon(glyph(home), 24, "outline")data-icon="home" or data-icon="home" data-icon-variant="24-outline"@include icon(glyph(map)) or @include icon(glyph(map), 24, "outline")data-icon="map" or data-icon="map" data-icon-variant="24-outline"@include icon(glyph(navigation-straight)) or @include icon(glyph(navigation-straight), 24, "outline")data-icon="navigation-straight" or data-icon="navigation-straight" data-icon-variant="24-outline"@include icon(glyph(navigation-to-left)) or @include icon(glyph(navigation-to-left), 24, "outline")data-icon="navigation-to-left" or data-icon="navigation-to-left" data-icon-variant="24-outline"@include icon(glyph(navigation-to-right)) or @include icon(glyph(navigation-to-right), 24, "outline")data-icon="navigation-to-right" or data-icon="navigation-to-right" data-icon-variant="24-outline"@include icon(glyph(navigation-u-turn)) or @include icon(glyph(navigation-u-turn), 24, "outline")data-icon="navigation-u-turn" or data-icon="navigation-u-turn" data-icon-variant="24-outline"@include icon(glyph(stop-sign)) or @include icon(glyph(stop-sign), 24, "outline")data-icon="stop-sign" or data-icon="stop-sign" data-icon-variant="24-outline"@include icon(glyph(parking)) or @include icon(glyph(parking), 24, "outline")data-icon="parking" or data-icon="parking" data-icon-variant="24-outline"@include icon(glyph(place)) or @include icon(glyph(place), 24, "outline")data-icon="place" or data-icon="place" data-icon-variant="24-outline"@include icon(glyph(set-position)) or @include icon(glyph(set-position), 24, "outline")data-icon="set-position" or data-icon="set-position" data-icon-variant="24-outline"@include icon(glyph(station)) or @include icon(glyph(station), 24, "outline")data-icon="station" or data-icon="station" data-icon-variant="24-outline"@include icon(glyph(train-station)) or @include icon(glyph(train-station), 24, "outline")data-icon="train-station" or data-icon="train-station" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(arrow-back)) or @include icon(glyph(arrow-back), 24, "outline")data-icon="arrow-back" or data-icon="arrow-back" data-icon-variant="24-outline"@include icon(glyph(arrow-down)) or @include icon(glyph(arrow-down), 24, "outline")data-icon="arrow-down" or data-icon="arrow-down" data-icon-variant="24-outline"@include icon(glyph(arrow-forward)) or @include icon(glyph(arrow-forward), 24, "outline")data-icon="arrow-forward" or data-icon="arrow-forward" data-icon-variant="24-outline"@include icon(glyph(arrow-up)) or @include icon(glyph(arrow-up), 24, "outline")data-icon="arrow-up" or data-icon="arrow-up" data-icon-variant="24-outline"@include icon(glyph(cancel)) or @include icon(glyph(cancel), 24, "outline")data-icon="cancel" or data-icon="cancel" data-icon-variant="24-outline"@include icon(glyph(chevron-left)) or @include icon(glyph(chevron-left), 24, "outline")data-icon="chevron-left" or data-icon="chevron-left" data-icon-variant="24-outline"@include icon(glyph(chevron-right)) or @include icon(glyph(chevron-right), 24, "outline")data-icon="chevron-right" or data-icon="chevron-right" data-icon-variant="24-outline"@include icon(glyph(close)) or @include icon(glyph(close), 24, "outline")data-icon="close" or data-icon="close" data-icon-variant="24-outline"@include icon(glyph(expand-less)) or @include icon(glyph(expand-less), 24, "outline")data-icon="expand-less" or data-icon="expand-less" data-icon-variant="24-outline"@include icon(glyph(expand-more)) or @include icon(glyph(expand-more), 24, "outline")data-icon="expand-more" or data-icon="expand-more" data-icon-variant="24-outline"@include icon(glyph(fullscreen)) or @include icon(glyph(fullscreen), 24, "outline")data-icon="fullscreen" or data-icon="fullscreen" data-icon-variant="24-outline"@include icon(glyph(fullscreen-exit)) or @include icon(glyph(fullscreen-exit), 24, "outline")data-icon="fullscreen-exit" or data-icon="fullscreen-exit" data-icon-variant="24-outline"@include icon(glyph(grid-view)) or @include icon(glyph(grid-view), 24, "outline")data-icon="grid-view" or data-icon="grid-view" data-icon-variant="24-outline"@include icon(glyph(link)) or @include icon(glyph(link), 24, "outline")data-icon="link" or data-icon="link" data-icon-variant="24-outline"@include icon(glyph(link-external)) or @include icon(glyph(link-external), 24, "outline")data-icon="link-external" or data-icon="link-external" data-icon-variant="24-outline"@include icon(glyph(list)) or @include icon(glyph(list), 24, "outline")data-icon="list" or data-icon="list" data-icon-variant="24-outline"@include icon(glyph(menu)) or @include icon(glyph(menu), 24, "outline")data-icon="menu" or data-icon="menu" data-icon-variant="24-outline"@include icon(glyph(more-horizontal)) or @include icon(glyph(more-horizontal), 24, "outline")data-icon="more-horizontal" or data-icon="more-horizontal" data-icon-variant="24-outline"@include icon(glyph(more-vertical)) or @include icon(glyph(more-vertical), 24, "outline")data-icon="more-vertical" or data-icon="more-vertical" data-icon-variant="24-outline"@include icon(glyph(refresh)) or @include icon(glyph(refresh), 24, "outline")data-icon="refresh" or data-icon="refresh" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(error)) or @include icon(glyph(error), 24, "outline")data-icon="error" or data-icon="error" data-icon-variant="24-outline"@include icon(glyph(notify)) or @include icon(glyph(notify), 24, "outline")data-icon="notify" or data-icon="notify" data-icon-variant="24-outline"@include icon(glyph(notify-cutoff)) or @include icon(glyph(notify-cutoff), 24, "outline")data-icon="notify-cutoff" or data-icon="notify-cutoff" data-icon-variant="24-outline"@include icon(glyph(warning)) or @include icon(glyph(warning), 24, "outline")data-icon="warning" or data-icon="warning" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(aisle)) or @include icon(glyph(aisle), 24, "outline")data-icon="aisle" or data-icon="aisle" data-icon-variant="24-outline"@include icon(glyph(aisle-not-available)) or @include icon(glyph(aisle-not-available), 24, "outline")data-icon="aisle-not-available" or data-icon="aisle-not-available" data-icon-variant="24-outline"@include icon(glyph(bed)) or @include icon(glyph(bed), 24, "outline")data-icon="bed" or data-icon="bed" data-icon-variant="24-outline"@include icon(glyph(childrens-compartment)) or @include icon(glyph(childrens-compartment), 24, "outline")data-icon="childrens-compartment" or data-icon="childrens-compartment" data-icon-variant="24-outline"@include icon(glyph(couchette)) or @include icon(glyph(couchette), 24, "outline")data-icon="couchette" or data-icon="couchette" data-icon-variant="24-outline"@include icon(glyph(elderly)) or @include icon(glyph(elderly), 24, "outline")data-icon="elderly" or data-icon="elderly" data-icon-variant="24-outline"@include icon(glyph(handicapped)) or @include icon(glyph(handicapped), 24, "outline")data-icon="handicapped" or data-icon="handicapped" data-icon-variant="24-outline"@include icon(glyph(parent-child-compartment)) or @include icon(glyph(parent-child-compartment), 24, "outline")data-icon="parent-child-compartment" or data-icon="parent-child-compartment" data-icon-variant="24-outline"@include icon(glyph(priority)) or @include icon(glyph(priority), 24, "outline")data-icon="priority" or data-icon="priority" data-icon-variant="24-outline"@include icon(glyph(quiet-zone)) or @include icon(glyph(quiet-zone), 24, "outline")data-icon="quiet-zone" or data-icon="quiet-zone" data-icon-variant="24-outline"@include icon(glyph(table)) or @include icon(glyph(table), 24, "outline")data-icon="table" or data-icon="table" data-icon-variant="24-outline"@include icon(glyph(traveler-with-reduced-mobility)) or @include icon(glyph(traveler-with-reduced-mobility), 24, "outline")data-icon="traveler-with-reduced-mobility" or data-icon="traveler-with-reduced-mobility" data-icon-variant="24-outline"@include icon(glyph(window)) or @include icon(glyph(window), 24, "outline")data-icon="window" or data-icon="window" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(bahnbonus)) or @include icon(glyph(bahnbonus), 24, "outline")data-icon="bahnbonus" or data-icon="bahnbonus" data-icon-variant="24-outline"@include icon(glyph(bahnbonus-card)) or @include icon(glyph(bahnbonus-card), 24, "outline")data-icon="bahnbonus-card" or data-icon="bahnbonus-card" data-icon-variant="24-outline"@include icon(glyph(bahncard)) or @include icon(glyph(bahncard), 24, "outline")data-icon="bahncard" or data-icon="bahncard" data-icon-variant="24-outline"@include icon(glyph(best-price)) or @include icon(glyph(best-price), 24, "outline")data-icon="best-price" or data-icon="best-price" data-icon-variant="24-outline"@include icon(glyph(commuter-ticket)) or @include icon(glyph(commuter-ticket), 24, "outline")data-icon="commuter-ticket" or data-icon="commuter-ticket" data-icon-variant="24-outline"@include icon(glyph(komfort-check-in)) or @include icon(glyph(komfort-check-in), 24, "outline")data-icon="komfort-check-in" or data-icon="komfort-check-in" data-icon-variant="24-outline"@include icon(glyph(komfort-check-in-check)) or @include icon(glyph(komfort-check-in-check), 24, "outline")data-icon="komfort-check-in-check" or data-icon="komfort-check-in-check" data-icon-variant="24-outline"@include icon(glyph(komfort-check-in-circle)) or @include icon(glyph(komfort-check-in-circle), 24, "outline")data-icon="komfort-check-in-circle" or data-icon="komfort-check-in-circle" data-icon-variant="24-outline"@include icon(glyph(multiple-cards)) or @include icon(glyph(multiple-cards), 24, "outline")data-icon="multiple-cards" or data-icon="multiple-cards" data-icon-variant="24-outline"@include icon(glyph(multiple-passenger)) or @include icon(glyph(multiple-passenger), 24, "outline")data-icon="multiple-passenger" or data-icon="multiple-passenger" data-icon-variant="24-outline"@include icon(glyph(my-travel)) or @include icon(glyph(my-travel), 24, "outline")data-icon="my-travel" or data-icon="my-travel" data-icon-variant="24-outline"@include icon(glyph(outward-journey)) or @include icon(glyph(outward-journey), 24, "outline")data-icon="outward-journey" or data-icon="outward-journey" data-icon-variant="24-outline"@include icon(glyph(qr-code)) or @include icon(glyph(qr-code), 24, "outline")data-icon="qr-code" or data-icon="qr-code" data-icon-variant="24-outline"@include icon(glyph(qr-code-scan)) or @include icon(glyph(qr-code-scan), 24, "outline")data-icon="qr-code-scan" or data-icon="qr-code-scan" data-icon-variant="24-outline"@include icon(glyph(return-journey)) or @include icon(glyph(return-journey), 24, "outline")data-icon="return-journey" or data-icon="return-journey" data-icon-variant="24-outline"@include icon(glyph(ticket)) or @include icon(glyph(ticket), 24, "outline")data-icon="ticket" or data-icon="ticket" data-icon-variant="24-outline"@include icon(glyph(ticket-discount)) or @include icon(glyph(ticket-discount), 24, "outline")data-icon="ticket-discount" or data-icon="ticket-discount" data-icon-variant="24-outline"@include icon(glyph(ticket-multiple)) or @include icon(glyph(ticket-multiple), 24, "outline")data-icon="ticket-multiple" or data-icon="ticket-multiple" data-icon-variant="24-outline"@include icon(glyph(ticket-subscription)) or @include icon(glyph(ticket-subscription), 24, "outline")data-icon="ticket-subscription" or data-icon="ticket-subscription" data-icon-variant="24-outline"@include icon(glyph(time-outward-journey)) or @include icon(glyph(time-outward-journey), 24, "outline")data-icon="time-outward-journey" or data-icon="time-outward-journey" data-icon-variant="24-outline"@include icon(glyph(time-return-journey)) or @include icon(glyph(time-return-journey), 24, "outline")data-icon="time-return-journey" or data-icon="time-return-journey" data-icon-variant="24-outline"@include icon(glyph(timetable)) or @include icon(glyph(timetable), 24, "outline")data-icon="timetable" or data-icon="timetable" data-icon-variant="24-outline"@include icon(glyph(travel-insurance)) or @include icon(glyph(travel-insurance), 24, "outline")data-icon="travel-insurance" or data-icon="travel-insurance" data-icon-variant="24-outline"Please keep in mind that it's optional to set the variant and size for the following ones, as this size (24) and style (outline) combination is defined as the default.
In case that you'll need another default in your project, you could overwrite the defaults by modifying the $icon-size and $icon-style SCSS variables.
@include icon(glyph(airplane)) or @include icon(glyph(airplane), 24, "outline")data-icon="airplane" or data-icon="airplane" data-icon-variant="24-outline"@include icon(glyph(bicycle)) or @include icon(glyph(bicycle), 24, "outline")data-icon="bicycle" or data-icon="bicycle" data-icon-variant="24-outline"@include icon(glyph(bicycle-trailer)) or @include icon(glyph(bicycle-trailer), 24, "outline")data-icon="bicycle-trailer" or data-icon="bicycle-trailer" data-icon-variant="24-outline"@include icon(glyph(call-a-bike)) or @include icon(glyph(call-a-bike), 24, "outline")data-icon="call-a-bike" or data-icon="call-a-bike" data-icon-variant="24-outline"@include icon(glyph(car)) or @include icon(glyph(car), 24, "outline")data-icon="car" or data-icon="car" data-icon-variant="24-outline"@include icon(glyph(carsharing)) or @include icon(glyph(carsharing), 24, "outline")data-icon="carsharing" or data-icon="carsharing" data-icon-variant="24-outline"@include icon(glyph(car-sequence)) or @include icon(glyph(car-sequence), 24, "outline")data-icon="car-sequence" or data-icon="car-sequence" data-icon-variant="24-outline"@include icon(glyph(electric-locomotive)) or @include icon(glyph(electric-locomotive), 24, "outline")data-icon="electric-locomotive" or data-icon="electric-locomotive" data-icon-variant="24-outline"@include icon(glyph(electric-scooter)) or @include icon(glyph(electric-scooter), 24, "outline")data-icon="electric-scooter" or data-icon="electric-scooter" data-icon-variant="24-outline"@include icon(glyph(ev-car)) or @include icon(glyph(ev-car), 24, "outline")data-icon="ev-car" or data-icon="ev-car" data-icon-variant="24-outline"@include icon(glyph(ferry)) or @include icon(glyph(ferry), 24, "outline")data-icon="ferry" or data-icon="ferry" data-icon-variant="24-outline"@include icon(glyph(handcart)) or @include icon(glyph(handcart), 24, "outline")data-icon="handcart" or data-icon="handcart" data-icon-variant="24-outline"@include icon(glyph(ice)) or @include icon(glyph(ice), 24, "outline")data-icon="ice" or data-icon="ice" data-icon-variant="24-outline"@include icon(glyph(intercity-train)) or @include icon(glyph(intercity-train), 24, "outline")data-icon="intercity-train" or data-icon="intercity-train" data-icon-variant="24-outline"@include icon(glyph(ice-side-view)) or @include icon(glyph(ice-side-view), 24, "outline")data-icon="ice-side-view" or data-icon="ice-side-view" data-icon-variant="24-outline"@include icon(glyph(local-bus)) or @include icon(glyph(local-bus), 24, "outline")data-icon="local-bus" or data-icon="local-bus" data-icon-variant="24-outline"@include icon(glyph(long-distance-bus)) or @include icon(glyph(long-distance-bus), 24, "outline")data-icon="long-distance-bus" or data-icon="long-distance-bus" data-icon-variant="24-outline"@include icon(glyph(local-train)) or @include icon(glyph(local-train), 24, "outline")data-icon="local-train" or data-icon="local-train" data-icon-variant="24-outline"@include icon(glyph(rail-and-fly)) or @include icon(glyph(rail-and-fly), 24, "outline")data-icon="rail-and-fly" or data-icon="rail-and-fly" data-icon-variant="24-outline"@include icon(glyph(railroad-car)) or @include icon(glyph(railroad-car), 24, "outline")data-icon="railroad-car" or data-icon="railroad-car" data-icon-variant="24-outline"@include icon(glyph(s-bahn)) or @include icon(glyph(s-bahn), 24, "outline")data-icon="s-bahn" or data-icon="s-bahn" data-icon-variant="24-outline"@include icon(glyph(scooter)) or @include icon(glyph(scooter), 24, "outline")data-icon="scooter" or data-icon="scooter" data-icon-variant="24-outline"@include icon(glyph(sev)) or @include icon(glyph(sev), 24, "outline")data-icon="sev" or data-icon="sev" data-icon-variant="24-outline"@include icon(glyph(speedboat)) or @include icon(glyph(speedboat), 24, "outline")data-icon="speedboat" or data-icon="speedboat" data-icon-variant="24-outline"@include icon(glyph(sprinter)) or @include icon(glyph(sprinter), 24, "outline")data-icon="sprinter" or data-icon="sprinter" data-icon-variant="24-outline"@include icon(glyph(subway)) or @include icon(glyph(subway), 24, "outline")data-icon="subway" or data-icon="subway" data-icon-variant="24-outline"@include icon(glyph(taxi)) or @include icon(glyph(taxi), 24, "outline")data-icon="taxi" or data-icon="taxi" data-icon-variant="24-outline"@include icon(glyph(train-and-car)) or @include icon(glyph(train-and-car), 24, "outline")data-icon="train-and-car" or data-icon="train-and-car" data-icon-variant="24-outline"@include icon(glyph(tram)) or @include icon(glyph(tram), 24, "outline")data-icon="tram" or data-icon="tram" data-icon-variant="24-outline"@include icon(glyph(walking)) or @include icon(glyph(walking), 24, "outline")data-icon="walking" or data-icon="walking" data-icon-variant="24-outline"@include icon(glyph(walking-fast)) or @include icon(glyph(walking-fast), 24, "outline")data-icon="walking-fast" or data-icon="walking-fast" data-icon-variant="24-outline"@include icon(glyph(add-circle), 32, "filled")data-icon="add-circle" data-icon-variant="32-filled"@include icon(glyph(alert), 32, "filled")data-icon="alert" data-icon-variant="32-filled"@include icon(glyph(bookmark), 32, "filled")data-icon="bookmark" data-icon-variant="32-filled"@include icon(glyph(camera), 32, "filled")data-icon="camera" data-icon-variant="32-filled"@include icon(glyph(check-circle), 32, "filled")data-icon="check-circle" data-icon-variant="32-filled"@include icon(glyph(cloud), 32, "filled")data-icon="cloud" data-icon-variant="32-filled"@include icon(glyph(heart), 32, "filled")data-icon="heart" data-icon-variant="32-filled"@include icon(glyph(help), 32, "filled")data-icon="help" data-icon-variant="32-filled"@include icon(glyph(info), 32, "filled")data-icon="info" data-icon-variant="32-filled"@include icon(glyph(pin), 32, "filled")data-icon="pin" data-icon-variant="32-filled"@include icon(glyph(remove), 32, "filled")data-icon="remove" data-icon-variant="32-filled"@include icon(glyph(star), 32, "filled")data-icon="star" data-icon-variant="32-filled"@include icon(glyph(fast-backward), 32, "filled")data-icon="fast-backward" data-icon-variant="32-filled"@include icon(glyph(fast-forward), 32, "filled")data-icon="fast-forward" data-icon-variant="32-filled"@include icon(glyph(microphone), 32, "filled")data-icon="microphone" data-icon-variant="32-filled"@include icon(glyph(play), 32, "filled")data-icon="play" data-icon-variant="32-filled"@include icon(glyph(skip-backward), 32, "filled")data-icon="skip-backward" data-icon-variant="32-filled"@include icon(glyph(skip-forward), 32, "filled")data-icon="skip-forward" data-icon-variant="32-filled"@include icon(glyph(stop), 32, "filled")data-icon="stop" data-icon-variant="32-filled"@include icon(glyph(gps), 32, "filled")data-icon="gps" data-icon-variant="32-filled"@include icon(glyph(gps-north), 32, "filled")data-icon="gps-north" data-icon-variant="32-filled"@include icon(glyph(cancel), 32, "filled")data-icon="cancel" data-icon-variant="32-filled"@include icon(glyph(error), 32, "filled")data-icon="error" data-icon-variant="32-filled"@include icon(glyph(warning), 32, "filled")data-icon="warning" data-icon-variant="32-filled"@include icon(glyph(airplane), 32, "filled")data-icon="airplane" data-icon-variant="32-filled"@include icon(glyph(bicycle), 32, "filled")data-icon="bicycle" data-icon-variant="32-filled"@include icon(glyph(bicycle-trailer), 32, "filled")data-icon="bicycle-trailer" data-icon-variant="32-filled"@include icon(glyph(call-a-bike), 32, "filled")data-icon="call-a-bike" data-icon-variant="32-filled"@include icon(glyph(car), 32, "filled")data-icon="car" data-icon-variant="32-filled"@include icon(glyph(carsharing), 32, "filled")data-icon="carsharing" data-icon-variant="32-filled"@include icon(glyph(electric-locomotive), 32, "filled")data-icon="electric-locomotive" data-icon-variant="32-filled"@include icon(glyph(electric-scooter), 32, "filled")data-icon="electric-scooter" data-icon-variant="32-filled"@include icon(glyph(ev-car), 32, "filled")data-icon="ev-car" data-icon-variant="32-filled"@include icon(glyph(ferry), 32, "filled")data-icon="ferry" data-icon-variant="32-filled"@include icon(glyph(handcart), 32, "filled")data-icon="handcart" data-icon-variant="32-filled"@include icon(glyph(ice), 32, "filled")data-icon="ice" data-icon-variant="32-filled"@include icon(glyph(intercity-train), 32, "filled")data-icon="intercity-train" data-icon-variant="32-filled"@include icon(glyph(local-bus), 32, "filled")data-icon="local-bus" data-icon-variant="32-filled"@include icon(glyph(long-distance-bus), 32, "filled")data-icon="long-distance-bus" data-icon-variant="32-filled"@include icon(glyph(local-train), 32, "filled")data-icon="local-train" data-icon-variant="32-filled"@include icon(glyph(s-bahn), 32, "filled")data-icon="s-bahn" data-icon-variant="32-filled"@include icon(glyph(scooter), 32, "filled")data-icon="scooter" data-icon-variant="32-filled"@include icon(glyph(speedboat), 32, "filled")data-icon="speedboat" data-icon-variant="32-filled"@include icon(glyph(subway), 32, "filled")data-icon="subway" data-icon-variant="32-filled"@include icon(glyph(taxi), 32, "filled")data-icon="taxi" data-icon-variant="32-filled"@include icon(glyph(train-and-car), 32, "filled")data-icon="train-and-car" data-icon-variant="32-filled"@include icon(glyph(tram), 32, "filled")data-icon="tram" data-icon-variant="32-filled"@include icon(glyph(walking), 32, "filled")data-icon="walking" data-icon-variant="32-filled"@include icon(glyph(walking-fast), 32, "filled")data-icon="walking-fast" data-icon-variant="32-filled"@include icon(glyph(account), 32, "outline")data-icon="account" data-icon-variant="32-outline"@include icon(glyph(add), 32, "outline")data-icon="add" data-icon-variant="32-outline"@include icon(glyph(add-circle), 32, "outline")data-icon="add-circle" data-icon-variant="32-outline"@include icon(glyph(add-link), 32, "outline")data-icon="add-link" data-icon-variant="32-outline"@include icon(glyph(alarm), 32, "outline")data-icon="alarm" data-icon-variant="32-outline"@include icon(glyph(alarm-add), 32, "outline")data-icon="alarm-add" data-icon-variant="32-outline"@include icon(glyph(alert), 32, "outline")data-icon="alert" data-icon-variant="32-outline"@include icon(glyph(alert-off), 32, "outline")data-icon="alert-off" data-icon-variant="32-outline"@include icon(glyph(artificial-intelligence), 32, "outline")data-icon="artificial-intelligence" data-icon-variant="32-outline"@include icon(glyph(attachment), 32, "outline")data-icon="attachment" data-icon-variant="32-outline"@include icon(glyph(augmented-reality), 32, "outline")data-icon="augmented-reality" data-icon-variant="32-outline"@include icon(glyph(block), 32, "outline")data-icon="block" data-icon-variant="32-outline"@include icon(glyph(bookmark), 32, "outline")data-icon="bookmark" data-icon-variant="32-outline"@include icon(glyph(bug), 32, "outline")data-icon="bug" data-icon-variant="32-outline"@include icon(glyph(build), 32, "outline")data-icon="build" data-icon-variant="32-outline"@include icon(glyph(calendar), 32, "outline")data-icon="calendar" data-icon-variant="32-outline"@include icon(glyph(camera), 32, "outline")data-icon="camera" data-icon-variant="32-outline"@include icon(glyph(cash), 32, "outline")data-icon="cash" data-icon-variant="32-outline"@include icon(glyph(check-circle), 32, "outline")data-icon="check-circle" data-icon-variant="32-outline"@include icon(glyph(cloud), 32, "outline")data-icon="cloud" data-icon-variant="32-outline"@include icon(glyph(cloud-download), 32, "outline")data-icon="cloud-download" data-icon-variant="32-outline"@include icon(glyph(cloud-upload), 32, "outline")data-icon="cloud-upload" data-icon-variant="32-outline"@include icon(glyph(compass), 32, "outline")data-icon="compass" data-icon-variant="32-outline"@include icon(glyph(copy), 32, "outline")data-icon="copy" data-icon-variant="32-outline"@include icon(glyph(credit-card), 32, "outline")data-icon="credit-card" data-icon-variant="32-outline"@include icon(glyph(dashboard), 32, "outline")data-icon="dashboard" data-icon-variant="32-outline"@include icon(glyph(delete), 32, "outline")data-icon="delete" data-icon-variant="32-outline"@include icon(glyph(discount), 32, "outline")data-icon="discount" data-icon-variant="32-outline"@include icon(glyph(document), 32, "outline")data-icon="document" data-icon-variant="32-outline"@include icon(glyph(document-check), 32, "outline")data-icon="document-check" data-icon-variant="32-outline"@include icon(glyph(document-cross), 32, "outline")data-icon="document-cross" data-icon-variant="32-outline"@include icon(glyph(done), 32, "outline")data-icon="done" data-icon-variant="32-outline"@include icon(glyph(download), 32, "outline")data-icon="download" data-icon-variant="32-outline"@include icon(glyph(drag-and-drop), 32, "outline")data-icon="drag-and-drop" data-icon-variant="32-outline"@include icon(glyph(edit), 32, "outline")data-icon="edit" data-icon-variant="32-outline"@include icon(glyph(euro-sign), 32, "outline")data-icon="euro-sign" data-icon-variant="32-outline"@include icon(glyph(face-delighted), 32, "outline")data-icon="face-delighted" data-icon-variant="32-outline"@include icon(glyph(face-disappointed), 32, "outline")data-icon="face-disappointed" data-icon-variant="32-outline"@include icon(glyph(face-neutral), 32, "outline")data-icon="face-neutral" data-icon-variant="32-outline"@include icon(glyph(face-sad), 32, "outline")data-icon="face-sad" data-icon-variant="32-outline"@include icon(glyph(face-smiling), 32, "outline")data-icon="face-smiling" data-icon-variant="32-outline"@include icon(glyph(filter), 32, "outline")data-icon="filter" data-icon-variant="32-outline"@include icon(glyph(fingerprint), 32, "outline")data-icon="fingerprint" data-icon-variant="32-outline"@include icon(glyph(folder), 32, "outline")data-icon="folder" data-icon-variant="32-outline"@include icon(glyph(folder-open), 32, "outline")data-icon="folder-open" data-icon-variant="32-outline"@include icon(glyph(generic-card), 32, "outline")data-icon="generic-card" data-icon-variant="32-outline"@include icon(glyph(giftcard), 32, "outline")data-icon="giftcard" data-icon-variant="32-outline"@include icon(glyph(hearing), 32, "outline")data-icon="hearing" data-icon-variant="32-outline"@include icon(glyph(hearing-disabled), 32, "outline")data-icon="hearing-disabled" data-icon-variant="32-outline"@include icon(glyph(heart), 32, "outline")data-icon="heart" data-icon-variant="32-outline"@include icon(glyph(help), 32, "outline")data-icon="help" data-icon-variant="32-outline"@include icon(glyph(id-card), 32, "outline")data-icon="id-card" data-icon-variant="32-outline"@include icon(glyph(image), 32, "outline")data-icon="image" data-icon-variant="32-outline"@include icon(glyph(info), 32, "outline")data-icon="info" data-icon-variant="32-outline"@include icon(glyph(key), 32, "outline")data-icon="key" data-icon-variant="32-outline"@include icon(glyph(legal), 32, "outline")data-icon="legal" data-icon-variant="32-outline"@include icon(glyph(lightbulb), 32, "outline")data-icon="lightbulb" data-icon-variant="32-outline"@include icon(glyph(lock-close), 32, "outline")data-icon="lock-close" data-icon-variant="32-outline"@include icon(glyph(lock-open), 32, "outline")data-icon="lock-open" data-icon-variant="32-outline"@include icon(glyph(log-out), 32, "outline")data-icon="log-out" data-icon-variant="32-outline"@include icon(glyph(logbook), 32, "outline")data-icon="logbook" data-icon-variant="32-outline"@include icon(glyph(minus), 32, "outline")data-icon="minus" data-icon-variant="32-outline"@include icon(glyph(piggybank), 32, "outline")data-icon="piggybank" data-icon-variant="32-outline"@include icon(glyph(pin), 32, "outline")data-icon="pin" data-icon-variant="32-outline"@include icon(glyph(print), 32, "outline")data-icon="print" data-icon-variant="32-outline"@include icon(glyph(pulse-wave), 32, "outline")data-icon="pulse-wave" data-icon-variant="32-outline"@include icon(glyph(push-button), 32, "outline")data-icon="push-button" data-icon-variant="32-outline"@include icon(glyph(remove), 32, "outline")data-icon="remove" data-icon-variant="32-outline"@include icon(glyph(resize), 32, "outline")data-icon="resize" data-icon-variant="32-outline"@include icon(glyph(resize-handle-corner), 32, "outline")data-icon="resize-handle-corner" data-icon-variant="32-outline"@include icon(glyph(save), 32, "outline")data-icon="save" data-icon-variant="32-outline"@include icon(glyph(schedule), 32, "outline")data-icon="schedule" data-icon-variant="32-outline"@include icon(glyph(search), 32, "outline")data-icon="search" data-icon-variant="32-outline"@include icon(glyph(send), 32, "outline")data-icon="send" data-icon-variant="32-outline"@include icon(glyph(sepa), 32, "outline")data-icon="sepa" data-icon-variant="32-outline"@include icon(glyph(settings), 32, "outline")data-icon="settings" data-icon-variant="32-outline"@include icon(glyph(share), 32, "outline")data-icon="share" data-icon-variant="32-outline"@include icon(glyph(shopping-bag), 32, "outline")data-icon="shopping-bag" data-icon-variant="32-outline"@include icon(glyph(shopping-basket), 32, "outline")data-icon="shopping-basket" data-icon-variant="32-outline"@include icon(glyph(shopping-basket-disabled), 32, "outline")data-icon="shopping-basket-disabled" data-icon-variant="32-outline"@include icon(glyph(shopping-cart), 32, "outline")data-icon="shopping-cart" data-icon-variant="32-outline"@include icon(glyph(shopping-cart-disabled), 32, "outline")data-icon="shopping-cart-disabled" data-icon-variant="32-outline"@include icon(glyph(sort-down), 32, "outline")data-icon="sort-down" data-icon-variant="32-outline"@include icon(glyph(sort-up), 32, "outline")data-icon="sort-up" data-icon-variant="32-outline"@include icon(glyph(star), 32, "outline")data-icon="star" data-icon-variant="32-outline"@include icon(glyph(swap-horizontal), 32, "outline")data-icon="swap-horizontal" data-icon-variant="32-outline"@include icon(glyph(swap-vertical), 32, "outline")data-icon="swap-vertical" data-icon-variant="32-outline"@include icon(glyph(thumb-up), 32, "outline")data-icon="thumb-up" data-icon-variant="32-outline"@include icon(glyph(thumb-up-down), 32, "outline")data-icon="thumb-up-down" data-icon-variant="32-outline"@include icon(glyph(translation), 32, "outline")data-icon="translation" data-icon-variant="32-outline"@include icon(glyph(undo), 32, "outline")data-icon="undo" data-icon-variant="32-outline"@include icon(glyph(upload), 32, "outline")data-icon="upload" data-icon-variant="32-outline"@include icon(glyph(visibility), 32, "outline")data-icon="visibility" data-icon-variant="32-outline"@include icon(glyph(visibility-off), 32, "outline")data-icon="visibility-off" data-icon-variant="32-outline"@include icon(glyph(voucher), 32, "outline")data-icon="voucher" data-icon-variant="32-outline"@include icon(glyph(website), 32, "outline")data-icon="website" data-icon-variant="32-outline"@include icon(glyph(zoom-in), 32, "outline")data-icon="zoom-in" data-icon-variant="32-outline"@include icon(glyph(zoom-out), 32, "outline")data-icon="zoom-out" data-icon-variant="32-outline"@include icon(glyph(clapperboard), 32, "outline")data-icon="clapperboard" data-icon-variant="32-outline"@include icon(glyph(fast-backward), 32, "outline")data-icon="fast-backward" data-icon-variant="32-outline"@include icon(glyph(fast-backward-10), 32, "outline")data-icon="fast-backward-10" data-icon-variant="32-outline"@include icon(glyph(fast-backward-30), 32, "outline")data-icon="fast-backward-30" data-icon-variant="32-outline"@include icon(glyph(fast-backward-empty), 32, "outline")data-icon="fast-backward-empty" data-icon-variant="32-outline"@include icon(glyph(fast-forward), 32, "outline")data-icon="fast-forward" data-icon-variant="32-outline"@include icon(glyph(fast-forward-10), 32, "outline")data-icon="fast-forward-10" data-icon-variant="32-outline"@include icon(glyph(fast-forward-30), 32, "outline")data-icon="fast-forward-30" data-icon-variant="32-outline"@include icon(glyph(fast-forward-empty), 32, "outline")data-icon="fast-forward-empty" data-icon-variant="32-outline"@include icon(glyph(microphone), 32, "outline")data-icon="microphone" data-icon-variant="32-outline"@include icon(glyph(pause), 32, "outline")data-icon="pause" data-icon-variant="32-outline"@include icon(glyph(play), 32, "outline")data-icon="play" data-icon-variant="32-outline"@include icon(glyph(skip-backward), 32, "outline")data-icon="skip-backward" data-icon-variant="32-outline"@include icon(glyph(skip-forward), 32, "outline")data-icon="skip-forward" data-icon-variant="32-outline"@include icon(glyph(stop), 32, "outline")data-icon="stop" data-icon-variant="32-outline"@include icon(glyph(subtitles), 32, "outline")data-icon="subtitles" data-icon-variant="32-outline"@include icon(glyph(volume-down), 32, "outline")data-icon="volume-down" data-icon-variant="32-outline"@include icon(glyph(volume-mute), 32, "outline")data-icon="volume-mute" data-icon-variant="32-outline"@include icon(glyph(volume-off), 32, "outline")data-icon="volume-off" data-icon-variant="32-outline"@include icon(glyph(volume-up), 32, "outline")data-icon="volume-up" data-icon-variant="32-outline"@include icon(glyph(logo), 32, "outline")data-icon="logo" data-icon-variant="32-outline"@include icon(glyph(call), 32, "outline")data-icon="call" data-icon-variant="32-outline"@include icon(glyph(chat), 32, "outline")data-icon="chat" data-icon-variant="32-outline"@include icon(glyph(conversation), 32, "outline")data-icon="conversation" data-icon-variant="32-outline"@include icon(glyph(fax), 32, "outline")data-icon="fax" data-icon-variant="32-outline"@include icon(glyph(feedback), 32, "outline")data-icon="feedback" data-icon-variant="32-outline"@include icon(glyph(mail), 32, "outline")data-icon="mail" data-icon-variant="32-outline"@include icon(glyph(mobile-phone), 32, "outline")data-icon="mobile-phone" data-icon-variant="32-outline"@include icon(glyph(mobile-off), 32, "outline")data-icon="mobile-off" data-icon-variant="32-outline"@include icon(glyph(question), 32, "outline")data-icon="question" data-icon-variant="32-outline"@include icon(glyph(receive-item), 32, "outline")data-icon="receive-item" data-icon-variant="32-outline"@include icon(glyph(share-item), 32, "outline")data-icon="share-item" data-icon-variant="32-outline"@include icon(glyph(wifi), 32, "outline")data-icon="wifi" data-icon-variant="32-outline"@include icon(glyph(wifi-off), 32, "outline")data-icon="wifi-off" data-icon-variant="32-outline"@include icon(glyph(mask), 32, "outline")data-icon="mask" data-icon-variant="32-outline"@include icon(glyph(playground), 32, "outline")data-icon="playground" data-icon-variant="32-outline"@include icon(glyph(restricted-mobility-toilet), 32, "outline")data-icon="restricted-mobility-toilet" data-icon-variant="32-outline"@include icon(glyph(shower), 32, "outline")data-icon="shower" data-icon-variant="32-outline"@include icon(glyph(shower-men), 32, "outline")data-icon="shower-men" data-icon-variant="32-outline"@include icon(glyph(shower-women), 32, "outline")data-icon="shower-women" data-icon-variant="32-outline"@include icon(glyph(sink), 32, "outline")data-icon="sink" data-icon-variant="32-outline"@include icon(glyph(wc), 32, "outline")data-icon="wc" data-icon-variant="32-outline"@include icon(glyph(wc-men), 32, "outline")data-icon="wc-men" data-icon-variant="32-outline"@include icon(glyph(wc-sign), 32, "outline")data-icon="wc-sign" data-icon-variant="32-outline"@include icon(glyph(wc-woman), 32, "outline")data-icon="wc-woman" data-icon-variant="32-outline"@include icon(glyph(air-condition), 32, "outline")data-icon="air-condition" data-icon-variant="32-outline"@include icon(glyph(buggy), 32, "outline")data-icon="buggy" data-icon-variant="32-outline"@include icon(glyph(clothing-hanger), 32, "outline")data-icon="clothing-hanger" data-icon-variant="32-outline"@include icon(glyph(day), 32, "outline")data-icon="day" data-icon-variant="32-outline"@include icon(glyph(dog), 32, "outline")data-icon="dog" data-icon-variant="32-outline"@include icon(glyph(entry-aid), 32, "outline")data-icon="entry-aid" data-icon-variant="32-outline"@include icon(glyph(environmental-mobility-check), 32, "outline")data-icon="environmental-mobility-check" data-icon-variant="32-outline"@include icon(glyph(hydrogen), 32, "outline")data-icon="hydrogen" data-icon-variant="32-outline"@include icon(glyph(iceportal), 32, "outline")data-icon="iceportal" data-icon-variant="32-outline"@include icon(glyph(luggage-compartment), 32, "outline")data-icon="luggage-compartment" data-icon-variant="32-outline"@include icon(glyph(luggage-rack), 32, "outline")data-icon="luggage-rack" data-icon-variant="32-outline"@include icon(glyph(marketplace), 32, "outline")data-icon="marketplace" data-icon-variant="32-outline"@include icon(glyph(medical), 32, "outline")data-icon="medical" data-icon-variant="32-outline"@include icon(glyph(night), 32, "outline")data-icon="night" data-icon-variant="32-outline"@include icon(glyph(no-smoking), 32, "outline")data-icon="no-smoking" data-icon-variant="32-outline"@include icon(glyph(person-with-cane), 32, "outline")data-icon="person-with-cane" data-icon-variant="32-outline"@include icon(glyph(person-with-rollator), 32, "outline")data-icon="person-with-rollator" data-icon-variant="32-outline"@include icon(glyph(platform), 32, "outline")data-icon="platform" data-icon-variant="32-outline"@include icon(glyph(power-outlet), 32, "outline")data-icon="power-outlet" data-icon-variant="32-outline"@include icon(glyph(regioguide), 32, "outline")data-icon="regioguide" data-icon-variant="32-outline"@include icon(glyph(reservation), 32, "outline")data-icon="reservation" data-icon-variant="32-outline"@include icon(glyph(standing-room), 32, "outline")data-icon="standing-room" data-icon-variant="32-outline"@include icon(glyph(steppless-entry), 32, "outline")data-icon="steppless-entry" data-icon-variant="32-outline"@include icon(glyph(support-dog), 32, "outline")data-icon="support-dog" data-icon-variant="32-outline"@include icon(glyph(breakfast), 32, "outline")data-icon="breakfast" data-icon-variant="32-outline"@include icon(glyph(coffee-cup), 32, "outline")data-icon="coffee-cup" data-icon-variant="32-outline"@include icon(glyph(drink), 32, "outline")data-icon="drink" data-icon-variant="32-outline"@include icon(glyph(restaurant), 32, "outline")data-icon="restaurant" data-icon-variant="32-outline"@include icon(glyph(database), 32, "outline")data-icon="database" data-icon-variant="32-outline"@include icon(glyph(1st-class), 32, "outline")data-icon="1st-class" data-icon-variant="32-outline"@include icon(glyph(2nd-class), 32, "outline")data-icon="2nd-class" data-icon-variant="32-outline"@include icon(glyph(alternative-connection), 32, "outline")data-icon="alternative-connection" data-icon-variant="32-outline"@include icon(glyph(booking), 32, "outline")data-icon="booking" data-icon-variant="32-outline"@include icon(glyph(capacity-indicator), 32, "outline")data-icon="capacity-indicator" data-icon-variant="32-outline"@include icon(glyph(capacity-indicator-fully-booked), 32, "outline")data-icon="capacity-indicator-fully-booked" data-icon-variant="32-outline"@include icon(glyph(capacity-indicator-high), 32, "outline")data-icon="capacity-indicator-high" data-icon-variant="32-outline"@include icon(glyph(capacity-indicator-low), 32, "outline")data-icon="capacity-indicator-low" data-icon-variant="32-outline"@include icon(glyph(destination), 32, "outline")data-icon="destination" data-icon-variant="32-outline"@include icon(glyph(intermediary-stop), 32, "outline")data-icon="intermediary-stop" data-icon-variant="32-outline"@include icon(glyph(mixed-class), 32, "outline")data-icon="mixed-class" data-icon-variant="32-outline"@include icon(glyph(round-trip), 32, "outline")data-icon="round-trip" data-icon-variant="32-outline"@include icon(glyph(single-trip), 32, "outline")data-icon="single-trip" data-icon-variant="32-outline"@include icon(glyph(start), 32, "outline")data-icon="start" data-icon-variant="32-outline"@include icon(glyph(gps), 32, "outline")data-icon="gps" data-icon-variant="32-outline"@include icon(glyph(gps-north), 32, "outline")data-icon="gps-north" data-icon-variant="32-outline"@include icon(glyph(home), 32, "outline")data-icon="home" data-icon-variant="32-outline"@include icon(glyph(map), 32, "outline")data-icon="map" data-icon-variant="32-outline"@include icon(glyph(navigation-straight), 32, "outline")data-icon="navigation-straight" data-icon-variant="32-outline"@include icon(glyph(navigation-to-left), 32, "outline")data-icon="navigation-to-left" data-icon-variant="32-outline"@include icon(glyph(navigation-to-right), 32, "outline")data-icon="navigation-to-right" data-icon-variant="32-outline"@include icon(glyph(navigation-u-turn), 32, "outline")data-icon="navigation-u-turn" data-icon-variant="32-outline"@include icon(glyph(parking), 32, "outline")data-icon="parking" data-icon-variant="32-outline"@include icon(glyph(place), 32, "outline")data-icon="place" data-icon-variant="32-outline"@include icon(glyph(set-position), 32, "outline")data-icon="set-position" data-icon-variant="32-outline"@include icon(glyph(station), 32, "outline")data-icon="station" data-icon-variant="32-outline"@include icon(glyph(stop-sign), 32, "outline")data-icon="stop-sign" data-icon-variant="32-outline"@include icon(glyph(train-station), 32, "outline")data-icon="train-station" data-icon-variant="32-outline"@include icon(glyph(arrow-back), 32, "outline")data-icon="arrow-back" data-icon-variant="32-outline"@include icon(glyph(arrow-down), 32, "outline")data-icon="arrow-down" data-icon-variant="32-outline"@include icon(glyph(arrow-forward), 32, "outline")data-icon="arrow-forward" data-icon-variant="32-outline"@include icon(glyph(arrow-up), 32, "outline")data-icon="arrow-up" data-icon-variant="32-outline"@include icon(glyph(cancel), 32, "outline")data-icon="cancel" data-icon-variant="32-outline"@include icon(glyph(chevron-left), 32, "outline")data-icon="chevron-left" data-icon-variant="32-outline"@include icon(glyph(chevron-right), 32, "outline")data-icon="chevron-right" data-icon-variant="32-outline"@include icon(glyph(close), 32, "outline")data-icon="close" data-icon-variant="32-outline"@include icon(glyph(expand-less), 32, "outline")data-icon="expand-less" data-icon-variant="32-outline"@include icon(glyph(expand-more), 32, "outline")data-icon="expand-more" data-icon-variant="32-outline"@include icon(glyph(fullscreen), 32, "outline")data-icon="fullscreen" data-icon-variant="32-outline"@include icon(glyph(fullscreen-exit), 32, "outline")data-icon="fullscreen-exit" data-icon-variant="32-outline"@include icon(glyph(grid-view), 32, "outline")data-icon="grid-view" data-icon-variant="32-outline"@include icon(glyph(link), 32, "outline")data-icon="link" data-icon-variant="32-outline"@include icon(glyph(link-external), 32, "outline")data-icon="link-external" data-icon-variant="32-outline"@include icon(glyph(list), 32, "outline")data-icon="list" data-icon-variant="32-outline"@include icon(glyph(menu), 32, "outline")data-icon="menu" data-icon-variant="32-outline"@include icon(glyph(more-horizontal), 32, "outline")data-icon="more-horizontal" data-icon-variant="32-outline"@include icon(glyph(more-vertical), 32, "outline")data-icon="more-vertical" data-icon-variant="32-outline"@include icon(glyph(refresh), 32, "outline")data-icon="refresh" data-icon-variant="32-outline"@include icon(glyph(error), 32, "outline")data-icon="error" data-icon-variant="32-outline"@include icon(glyph(notify), 32, "outline")data-icon="notify" data-icon-variant="32-outline"@include icon(glyph(notify-cutoff), 32, "outline")data-icon="notify-cutoff" data-icon-variant="32-outline"@include icon(glyph(warning), 32, "outline")data-icon="warning" data-icon-variant="32-outline"@include icon(glyph(aisle), 32, "outline")data-icon="aisle" data-icon-variant="32-outline"@include icon(glyph(aisle-not-available), 32, "outline")data-icon="aisle-not-available" data-icon-variant="32-outline"@include icon(glyph(bed), 32, "outline")data-icon="bed" data-icon-variant="32-outline"@include icon(glyph(childrens-compartment), 32, "outline")data-icon="childrens-compartment" data-icon-variant="32-outline"@include icon(glyph(couchette), 32, "outline")data-icon="couchette" data-icon-variant="32-outline"@include icon(glyph(elderly), 32, "outline")data-icon="elderly" data-icon-variant="32-outline"@include icon(glyph(handicapped), 32, "outline")data-icon="handicapped" data-icon-variant="32-outline"@include icon(glyph(parent-child-compartment), 32, "outline")data-icon="parent-child-compartment" data-icon-variant="32-outline"@include icon(glyph(priority), 32, "outline")data-icon="priority" data-icon-variant="32-outline"@include icon(glyph(quiet-zone), 32, "outline")data-icon="quiet-zone" data-icon-variant="32-outline"@include icon(glyph(table), 32, "outline")data-icon="table" data-icon-variant="32-outline"@include icon(glyph(traveler-with-reduced-mobility), 32, "outline")data-icon="traveler-with-reduced-mobility" data-icon-variant="32-outline"@include icon(glyph(window), 32, "outline")data-icon="window" data-icon-variant="32-outline"@include icon(glyph(bahnbonus-card), 32, "outline")data-icon="bahnbonus-card" data-icon-variant="32-outline"@include icon(glyph(bahnbonus), 32, "outline")data-icon="bahnbonus" data-icon-variant="32-outline"@include icon(glyph(bahncard), 32, "outline")data-icon="bahncard" data-icon-variant="32-outline"@include icon(glyph(best-price), 32, "outline")data-icon="best-price" data-icon-variant="32-outline"@include icon(glyph(commuter-ticket), 32, "outline")data-icon="commuter-ticket" data-icon-variant="32-outline"@include icon(glyph(komfort-check-in-check), 32, "outline")data-icon="komfort-check-in-check" data-icon-variant="32-outline"@include icon(glyph(komfort-check-in-circle), 32, "outline")data-icon="komfort-check-in-circle" data-icon-variant="32-outline"@include icon(glyph(komfort-check-in), 32, "outline")data-icon="komfort-check-in" data-icon-variant="32-outline"@include icon(glyph(multiple-cards), 32, "outline")data-icon="multiple-cards" data-icon-variant="32-outline"@include icon(glyph(multiple-passenger), 32, "outline")data-icon="multiple-passenger" data-icon-variant="32-outline"@include icon(glyph(my-travel), 32, "outline")data-icon="my-travel" data-icon-variant="32-outline"@include icon(glyph(outward-journey), 32, "outline")data-icon="outward-journey" data-icon-variant="32-outline"@include icon(glyph(qr-code), 32, "outline")data-icon="qr-code" data-icon-variant="32-outline"@include icon(glyph(qr-code-scan), 32, "outline")data-icon="qr-code-scan" data-icon-variant="32-outline"@include icon(glyph(return-journey), 32, "outline")data-icon="return-journey" data-icon-variant="32-outline"@include icon(glyph(ticket), 32, "outline")data-icon="ticket" data-icon-variant="32-outline"@include icon(glyph(ticket-discount), 32, "outline")data-icon="ticket-discount" data-icon-variant="32-outline"@include icon(glyph(ticket-multiple), 32, "outline")data-icon="ticket-multiple" data-icon-variant="32-outline"@include icon(glyph(ticket-subscription), 32, "outline")data-icon="ticket-subscription" data-icon-variant="32-outline"@include icon(glyph(time-outward-journey), 32, "outline")data-icon="time-outward-journey" data-icon-variant="32-outline"@include icon(glyph(time-return-journey), 32, "outline")data-icon="time-return-journey" data-icon-variant="32-outline"@include icon(glyph(timetable), 32, "outline")data-icon="timetable" data-icon-variant="32-outline"@include icon(glyph(travel-insurance), 32, "outline")data-icon="travel-insurance" data-icon-variant="32-outline"@include icon(glyph(airplane), 32, "outline")data-icon="airplane" data-icon-variant="32-outline"@include icon(glyph(bicycle), 32, "outline")data-icon="bicycle" data-icon-variant="32-outline"@include icon(glyph(bicycle-trailer), 32, "outline")data-icon="bicycle-trailer" data-icon-variant="32-outline"@include icon(glyph(call-a-bike), 32, "outline")data-icon="call-a-bike" data-icon-variant="32-outline"@include icon(glyph(car), 32, "outline")data-icon="car" data-icon-variant="32-outline"@include icon(glyph(carsharing), 32, "outline")data-icon="carsharing" data-icon-variant="32-outline"@include icon(glyph(car-sequence), 32, "outline")data-icon="car-sequence" data-icon-variant="32-outline"@include icon(glyph(electric-locomotive), 32, "outline")data-icon="electric-locomotive" data-icon-variant="32-outline"@include icon(glyph(electric-scooter), 32, "outline")data-icon="electric-scooter" data-icon-variant="32-outline"@include icon(glyph(ev-car), 32, "outline")data-icon="ev-car" data-icon-variant="32-outline"@include icon(glyph(ferry), 32, "outline")data-icon="ferry" data-icon-variant="32-outline"@include icon(glyph(handcart), 32, "outline")data-icon="handcart" data-icon-variant="32-outline"@include icon(glyph(ice), 32, "outline")data-icon="ice" data-icon-variant="32-outline"@include icon(glyph(intercity-train), 32, "outline")data-icon="intercity-train" data-icon-variant="32-outline"@include icon(glyph(ice-side-view), 32, "outline")data-icon="ice-side-view" data-icon-variant="32-outline"@include icon(glyph(local-bus), 32, "outline")data-icon="local-bus" data-icon-variant="32-outline"@include icon(glyph(long-distance-bus), 32, "outline")data-icon="long-distance-bus" data-icon-variant="32-outline"@include icon(glyph(local-train), 32, "outline")data-icon="local-train" data-icon-variant="32-outline"@include icon(glyph(rail-and-fly), 32, "outline")data-icon="rail-and-fly" data-icon-variant="32-outline"@include icon(glyph(railroad-car), 32, "outline")data-icon="railroad-car" data-icon-variant="32-outline"@include icon(glyph(s-bahn), 32, "outline")data-icon="s-bahn" data-icon-variant="32-outline"@include icon(glyph(scooter), 32, "outline")data-icon="scooter" data-icon-variant="32-outline"@include icon(glyph(sev), 32, "outline")data-icon="sev" data-icon-variant="32-outline"@include icon(glyph(speedboat), 32, "outline")data-icon="speedboat" data-icon-variant="32-outline"@include icon(glyph(sprinter), 32, "outline")data-icon="sprinter" data-icon-variant="32-outline"@include icon(glyph(subway), 32, "outline")data-icon="subway" data-icon-variant="32-outline"@include icon(glyph(taxi), 32, "outline")data-icon="taxi" data-icon-variant="32-outline"@include icon(glyph(train-and-car), 32, "outline")data-icon="train-and-car" data-icon-variant="32-outline"@include icon(glyph(tram), 32, "outline")data-icon="tram" data-icon-variant="32-outline"@include icon(glyph(walking), 32, "outline")data-icon="walking" data-icon-variant="32-outline"@include icon(glyph(walking-fast), 32, "outline")data-icon="walking-fast" data-icon-variant="32-outline"@include icon(glyph(fast-backward), 48, "filled")data-icon="fast-backward" data-icon-variant="48-filled"@include icon(glyph(fast-forward), 48, "filled")data-icon="fast-forward" data-icon-variant="48-filled"@include icon(glyph(play), 48, "filled")data-icon="play" data-icon-variant="48-filled"@include icon(glyph(skip-backward), 48, "filled")data-icon="skip-backward" data-icon-variant="48-filled"@include icon(glyph(skip-forward), 48, "filled")data-icon="skip-forward" data-icon-variant="48-filled"@include icon(glyph(stop), 48, "filled")data-icon="stop" data-icon-variant="48-filled"@include icon(glyph(fast-backward), 48, "outline")data-icon="fast-backward" data-icon-variant="48-outline"@include icon(glyph(fast-forward), 48, "outline")data-icon="fast-forward" data-icon-variant="48-outline"@include icon(glyph(pause), 48, "outline")data-icon="pause" data-icon-variant="48-outline"@include icon(glyph(play), 48, "outline")data-icon="play" data-icon-variant="48-outline"@include icon(glyph(skip-backward), 48, "outline")data-icon="skip-backward" data-icon-variant="48-outline"@include icon(glyph(skip-forward), 48, "outline")data-icon="skip-forward" data-icon-variant="48-outline"@include icon(glyph(stop), 48, "outline")data-icon="stop" data-icon-variant="48-outline"@include icon(glyph(logo), 48, "outline")data-icon="logo" data-icon-variant="48-outline"@include icon(glyph(fast-backward), 64, "filled")data-icon="fast-backward" data-icon-variant="64-filled"@include icon(glyph(fast-forward), 64, "filled")data-icon="fast-forward" data-icon-variant="64-filled"@include icon(glyph(play), 64, "filled")data-icon="play" data-icon-variant="64-filled"@include icon(glyph(skip-backward), 64, "filled")data-icon="skip-backward" data-icon-variant="64-filled"@include icon(glyph(skip-forward), 64, "filled")data-icon="skip-forward" data-icon-variant="64-filled"@include icon(glyph(stop), 64, "filled")data-icon="stop" data-icon-variant="64-filled"@include icon(glyph(fast-backward), 64, "outline")data-icon="fast-backward" data-icon-variant="64-outline"@include icon(glyph(fast-forward), 64, "outline")data-icon="fast-forward" data-icon-variant="64-outline"@include icon(glyph(pause), 64, "outline")data-icon="pause" data-icon-variant="64-outline"@include icon(glyph(play), 64, "outline")data-icon="play" data-icon-variant="64-outline"@include icon(glyph(skip-backward), 64, "outline")data-icon="skip-backward" data-icon-variant="64-outline"@include icon(glyph(skip-forward), 64, "outline")data-icon="skip-forward" data-icon-variant="64-outline"@include icon(glyph(stop), 64, "outline")data-icon="stop" data-icon-variant="64-outline"@include icon(glyph(logo), 64, "outline")data-icon="logo" data-icon-variant="64-outline"