From 7a4ee62b4c917c8931c340002e6d24e3c4160fb9 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 12 Oct 2022 15:16:37 +0200
Subject: [PATCH] docs(icons): optimized example

---
 source/_patterns/00-base/icons/_icons.md | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/source/_patterns/00-base/icons/_icons.md b/source/_patterns/00-base/icons/_icons.md
index 40c23bc486..b7e5d81ae4 100644
--- a/source/_patterns/00-base/icons/_icons.md
+++ b/source/_patterns/00-base/icons/_icons.md
@@ -28,14 +28,16 @@ Use the following SCSS mixin for setting an icon:
 ```scss
 // schema
 @mixin icon(
-	$glyph: "",
-	$size: $icon-size,
-	$style: $icon-style,
-	$position: "before"
+  $glyph: "",
+  $size: $icon-size,
+  $style: $icon-style,
+  $position: "before"
 );
 
 // example
-@include icon(glyph(account), 20, "outline");
+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.
@@ -76,11 +78,11 @@ If you'd like to include the icon after the content/text, use the HTML attribute
 
 ```html
 <a
-	href="#"
-	data-icon-after="alarm"
-	data-icon-variant-after="24-outline"
-	class="elm-link"
-	>Alarm</a
+  href="#"
+  data-icon-after="alarm"
+  data-icon-variant-after="24-outline"
+  class="elm-link"
+  >Alarm</a
 >
 ```