refactor(icon): provide possibility for overwrites (#398)

for font-size of the icons from the outside.

Author: mfranzke

source/_patterns/00-base/icons/_icons.helpers.scss

@@ -9,7 +9,11 @@
 	&::#{$position} {
 		--icon-font-family: "#{"icons-" + $size + "-" + $style}",
 			"missing-icons" !important;
-		--icon-font-size: #{to-rem($pxValue: $size)};
+
+		font-size: var(
+			--icon-font-size-#{$position},
+			var(--icon-font-size, #{to-rem($pxValue: $size)})
+		);
 
 		@if $position == "before" {
 			margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
@@ -30,8 +34,6 @@
 			/*** icon - partial ***/
 			// * use !important to prevent issues with browser extensions that change fonts
 			font-family: var(--icon-font-family) !important;
-
-			font-size: var(--icon-font-size);
 			font-style: normal;
 			font-variant: normal;
 

source/_patterns/00-base/icons/_icons.md

@@ -94,6 +94,22 @@ In case of the need to display only the icon and hide the text next to it, use t
 .is-icon-text-replace
 ```
 
+###### Tweaking icons `font-size`
+
+If 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`).
+
+```html
+<a
+  href="#"
+  data-icon="alarm"
+  data-icon-variant="24-outline"
+  style="--icon-font-size-before: 23px"
+  >Alarm</a
+>
+```
+
+#### Further tweaking
+
 ### SVG files
 
 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/`.

source/_patterns/00-base/icons/_icons.placeholder.scss

@@ -10,8 +10,6 @@
 	// * use !important to prevent issues with browser extensions that change fonts
 	font-family: var(--icon-font-family) !important;
 
-	font-size: var(--icon-font-size);
-
 	// * Better Font Rendering ===========
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

source/_patterns/00-base/icons/icons.scss

@@ -12,13 +12,21 @@
 	&::before {
 		@extend %icon;
 		margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
+		font-size: var(
+			--icon-font-size-before,
+			var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+		);
 	}
 }
 
 [data-icon-after] {
 	&::after {
 		@extend %icon;
 		margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
+		font-size: var(
+			--icon-font-size-after,
+			var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
+		);
 	}
 }