diff --git a/src/patterns/04-components/icon/_icon.scss b/src/patterns/04-components/icon/_icon.scss
index d0772576984a55cc6adb1b25539e16877e13c5e1..d793bc144c3c8efd70d23f5b9a892e2f0f550db4 100644
--- a/src/patterns/04-components/icon/_icon.scss
+++ b/src/patterns/04-components/icon/_icon.scss
@@ -6,10 +6,12 @@
height: var(--size-3);
line-height: normal;
width: var(--size-3);
+
svg {
height: var(--size-3);
width: var(--size-3);
}
+
// Fixes delayed transitions in Chrome.
* {
transition: none;
diff --git a/src/patterns/04-components/icon/icon--button/_icon--button.scss b/src/patterns/04-components/icon/icon--button/_icon--button.scss
index 790e3c4bc1f460f0ca312cb479e666b2db67decc..d28186dacdeee09696a9fb795c5009b9fe2b5ce0 100644
--- a/src/patterns/04-components/icon/icon--button/_icon--button.scss
+++ b/src/patterns/04-components/icon/icon--button/_icon--button.scss
@@ -20,6 +20,7 @@ $icon-font-size-small: var(--font-size-0) !default;
line-height: normal;
padding: 0 var(--size-1);
transition: background 0.2s ease-in;
+
.uw-icon {
align-items: center;
display: flex;
@@ -32,10 +33,12 @@ $icon-font-size-small: var(--font-size-0) !default;
&.uw-icon-link {
color: var(--uw-black);
text-decoration: none;
+
&:hover,
&:focus {
background: $button-background-color-hover;
color: var(--uw-black) !important;
+
.uw-icon {
svg{
fill: var(--uw-black);
diff --git a/src/patterns/04-components/svg/_svg-macro.twig b/src/patterns/04-components/svg/_svg-macro.twig
new file mode 100644
index 0000000000000000000000000000000000000000..44b201fd46a6907a42366b92ebaf3357321e59ff
--- /dev/null
+++ b/src/patterns/04-components/svg/_svg-macro.twig
@@ -0,0 +1,6 @@
+{% macro get(icon) %}
+ {% include '@components/svg/icons/_' ~ icon ~ '.svg.twig' with {
+ 'icon': icon
+ } only
+ %}
+{% endmacro %}
diff --git a/src/patterns/04-components/svg/_svg.twig b/src/patterns/04-components/svg/_svg.twig
index 88ba2fcb36dd2206cc24a49e5e64cb2590583348..cc4135cbce76db817e88442316f05791c12c520e 100644
--- a/src/patterns/04-components/svg/_svg.twig
+++ b/src/patterns/04-components/svg/_svg.twig
@@ -1,6 +1,9 @@
-<span class="uw-icon uw-svg uw-svg__{{ svg_name }}">
-{# {% include '@components/svg/icons/_' ~ svg_name ~ '.svg.twig' %}#}
+{% import "@components/svg/_svg-macro.twig" as icons %}
- {% include '@components/svg/icons/_instagram.svg.twig' %}
+{% if not svg_name %}
+ {% set svg_name = 'android' %}
+{% endif %}
-</span>
+<div class="uw-icon">
+ {{ icons.get(svg_name) }}
+</div>
diff --git a/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig b/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
index 6e284f91460b738d02f689fb2874575d1e30d09c..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
+++ b/src/patterns/04-components/svg/icons/_add-to-calendar.svg.twig
@@ -1,4 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>add-to-calendar</title>
-<path d="M9.573 10.021c0.735 0 1.332-0.597 1.332-1.333h-0.001v-4.362c0-0.736-0.597-1.332-1.332-1.332s-1.332 0.596-1.331 1.332v4.362c0 0.736 0.596 1.333 1.332 1.333zM21.908 10.021c0.735 0 1.331-0.597 1.331-1.333v-4.362c0-0.736-0.596-1.332-1.332-1.332-0.737 0-1.334 0.596-1.333 1.332v4.362c0 0.736 0.597 1.333 1.334 1.333zM29.001 21.571h-4.53v-4.531c0-0.002 0-0.002-0.006 0l-2.052 0.031c0 0-0.001-0.002-0.002 0l0.001 4.5h-4.37l0.030 2.062 4.34-0.004v4.34l2.060 0.033v-4.373h4.501l0.028-2.051c0.002-0.006 0.002-0.006 0-0.007zM29.517 17.527v-8.495c-0.001-1.741-1.302-3.149-2.907-3.149l-0-0h-2.619v2.69c0 1.15-0.932 2.084-2.083 2.084-0.575 0-1.097-0.232-1.474-0.612-0.376-0.377-0.611-0.9-0.611-1.473v-2.689h-8.167v2.69c0 1.15-0.931 2.084-2.082 2.084-0.574 0-1.096-0.232-1.474-0.612-0.376-0.377-0.61-0.899-0.61-1.472v-2.69h-2.56c-1.606 0-2.908 1.409-2.908 3.149v16.961c0 1.739 1.301 3.151 2.908 3.151h13.819c1.282 0.871 2.829 1.381 4.492 1.381 4.421 0 8.017-3.599 8.017-8.019 0-1.88-0.651-3.611-1.739-4.98zM23.489 29.11c-3.637 0-6.601-2.963-6.601-6.602s2.963-6.6 6.601-6.6c3.64 0 6.601 2.961 6.601 6.6s-2.96 6.602-6.601 6.602z"></path>
-</svg>
diff --git a/src/patterns/04-components/svg/svg.yml b/src/patterns/04-components/svg/svg.yml
deleted file mode 100644
index ad91df180353ba99773abfcc767c63a93a9e1f4e..0000000000000000000000000000000000000000
--- a/src/patterns/04-components/svg/svg.yml
+++ /dev/null
@@ -1,2 +0,0 @@
----
-svg_name: android
diff --git a/src/patterns/04-components/svg/svgs.twig b/src/patterns/04-components/svg/svgs.twig
index e3537c68de2a9bbb973a1eea1c10c5fdc3cd0b17..5bd95729080797bfa3ca930158d1badfd9f385f9 100644
--- a/src/patterns/04-components/svg/svgs.twig
+++ b/src/patterns/04-components/svg/svgs.twig
@@ -1,6 +1,6 @@
+{% import "@components/svg/_svg-macro.twig" as icons %}
+
{% for svg_name in svg_names %}
<h3>{{ svg_name | capitalize }}</h3>
- {% include '@components/svg/_svg.twig' with {
- 'svg_name': svg_name
- } %}
-{% endfor %}
\ No newline at end of file
+ {{ icons.get(svg_name) }}
+{% endfor %}
diff --git a/src/patterns/04-components/svg/svgs.yml b/src/patterns/04-components/svg/svgs.yml
index e7f659b861cf9fef20c3fa1e591c18a034462255..9d28ef093779bded2c9ec524d864b267ee59a83d 100644
--- a/src/patterns/04-components/svg/svgs.yml
+++ b/src/patterns/04-components/svg/svgs.yml
@@ -82,3 +82,4 @@ svg_names:
- yahoo
- youtube
- youtube-box
+svg_name: android