Europa Component Library

Icons

Documentation • Demo

EMA icons

Icons are using svg files.

  • Color can be changed by using color classes (see utilities)
  • Size can be changed by using classes ema-icon--{size} where size is s, m, l, xl or xxl
{#
  - "icon_path" (string): path to the icons file (default: '../../framework/images/icons/ema-icons.svg')
  - "icon" (string): name of the icon (default: '')
  - "extra_classes" (string): extra CSS classes to be added
  - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _css_class = 'ema-icon' %}
{% set _extra_attributes = '' %}
{% set _icon_path = icon_path|default('../../framework/images/icons/ema-icons.svg') %}

{# Internal logic - Process properties #}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
  {% endfor %}
{% endif %}

{# Print the result  #}

<svg class="{{ _css_class }}" {{ _extra_attributes }}>
  <use xlink:href="{{ _icon_path }}#ema-icon-set_{{ icon }}" />
</svg>
 
/* doi */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "doi"
}


/* it-support */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "it-support"
}


/* sap */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "sap"
}


/* arrow-down */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "arrow-down"
}


/* arrow-left */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "arrow-left"
}


/* arrow-right */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "arrow-right"
}


/* arrow-up */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "arrow-up"
}


/* booking */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "booking"
}


/* calendar-datepicker */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "calendar-datepicker"
}


/* close */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "close"
}


/* comment */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "comment"
}


/* contact-point */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "contact-point"
}


/* contact */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "contact"
}


/* curriculum-vitae */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "curriculum-vitae"
}


/* deadlines */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "deadlines"
}


/* declaration */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "declaration"
}


/* desk */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "desk"
}


/* discussion-board */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "discussion-board"
}


/* download */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "download"
}


/* e-mail */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "e-mail"
}


/* excel */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "excel"
}


/* facilities */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "facilities"
}


/* faq */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "faq"
}


/* favourites */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "favourites"
}


/* featured-topics */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "featured-topics"
}


/* group */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "group"
}


/* home */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "home"
}


/* info */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "info"
}


/* link-ext */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "link-ext"
}


/* list-view */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "list-view"
}


/* minus */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "minus"
}


/* mobile-phone */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "mobile-phone"
}


/* news */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "news"
}


/* opinion */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "opinion"
}


/* organizational-structure */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "organizational-structure"
}


/* pdf */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "pdf"
}


/* phone */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "phone"
}


/* play */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "play"
}


/* plus */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "plus"
}


/* powerpoint */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "powerpoint"
}


/* related-applications */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "related-applications"
}


/* related-documents */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "related-documents"
}


/* related-links */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "related-links"
}


/* reply */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "reply"
}


/* search */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "search"
}


/* select */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "select"
}


/* settings */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "settings"
}


/* share */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "share"
}


/* subscribe */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "subscribe"
}


/* training-courses */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "training-courses"
}


/* twitter */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "twitter"
}


/* word */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "word"
}


/* zip */
{
  "icon_path": "../../framework/images/icons/ema-icons.svg",
  "icon": "zip"
}


<!-- doi -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_doi" />
</svg>


<!-- it-support -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_it-support" />
</svg>


<!-- sap -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_sap" />
</svg>


<!-- arrow-down -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_arrow-down" />
</svg>


<!-- arrow-left -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_arrow-left" />
</svg>


<!-- arrow-right -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_arrow-right" />
</svg>


<!-- arrow-up -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_arrow-up" />
</svg>


<!-- booking -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_booking" />
</svg>


<!-- calendar-datepicker -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_calendar-datepicker" />
</svg>


<!-- close -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_close" />
</svg>


<!-- comment -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_comment" />
</svg>


<!-- contact-point -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_contact-point" />
</svg>


<!-- contact -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_contact" />
</svg>


<!-- curriculum-vitae -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_curriculum-vitae" />
</svg>


<!-- deadlines -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_deadlines" />
</svg>


<!-- declaration -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_declaration" />
</svg>


<!-- desk -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_desk" />
</svg>


<!-- discussion-board -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_discussion-board" />
</svg>


<!-- download -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_download" />
</svg>


<!-- e-mail -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_e-mail" />
</svg>


<!-- excel -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_excel" />
</svg>


<!-- facilities -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_facilities" />
</svg>


<!-- faq -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_faq" />
</svg>


<!-- favourites -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_favourites" />
</svg>


<!-- featured-topics -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_featured-topics" />
</svg>


<!-- group -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_group" />
</svg>


<!-- home -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_home" />
</svg>


<!-- info -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_info" />
</svg>


<!-- link-ext -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_link-ext" />
</svg>


<!-- list-view -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_list-view" />
</svg>


<!-- minus -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_minus" />
</svg>


<!-- mobile-phone -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_mobile-phone" />
</svg>


<!-- news -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_news" />
</svg>


<!-- opinion -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_opinion" />
</svg>


<!-- organizational-structure -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_organizational-structure" />
</svg>


<!-- pdf -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_pdf" />
</svg>


<!-- phone -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_phone" />
</svg>


<!-- play -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_play" />
</svg>


<!-- plus -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_plus" />
</svg>


<!-- powerpoint -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_powerpoint" />
</svg>


<!-- related-applications -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_related-applications" />
</svg>


<!-- related-documents -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_related-documents" />
</svg>


<!-- related-links -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_related-links" />
</svg>


<!-- reply -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_reply" />
</svg>


<!-- search -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_search" />
</svg>


<!-- select -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_select" />
</svg>


<!-- settings -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_settings" />
</svg>


<!-- share -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_share" />
</svg>


<!-- subscribe -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_subscribe" />
</svg>


<!-- training-courses -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_training-courses" />
</svg>


<!-- twitter -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_twitter" />
</svg>


<!-- word -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_word" />
</svg>


<!-- zip -->
<svg class="ema-icon">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_zip" />
</svg>
  • Content: 
    .ema-icon {
  display: inline-block;
  fill: currentColor;
  height: map-get($ecl-spacing, 'm');
  width: map-get($ecl-spacing, 'm');
}

@each $key, $value in $ecl-spacing {
  .ema-icon--#{$key} {
    height: $value;
    width: $value;
  }
}
  • URL: /components/raw/ema-icons/ema-icons.scss
  • Filesystem Path: framework/content/ema-icons/ema-icons.scss
  • Size: 242 Bytes