Improve SCSS specificity for Material Symbols style variants

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

eform-client/src/scss/components/_icon.scss

@@ -22,7 +22,7 @@ i, .mat-icon {
   &.material-symbols-outlined,
   &.material-symbols-rounded,
   &.material-symbols-sharp {
-    // Default font variation settings
+    // Default font variation settings (for 24px which is most common)
     font-variation-settings:
       'FILL' 0,
       'wght' 400,
@@ -74,14 +74,15 @@ i, .mat-icon {
       color: $eform-green-dark
     }
 
-    // Style variations for default size (24px)
-    &.filled {
+    // Style variations for default size (when no size class is specified)
+    // These work when no md-* class is present
+    &.filled:not(.md-18):not(.md-24):not(.md-36):not(.md-48) {
       font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     }
-    &.light {
+    &.light:not(.md-18):not(.md-24):not(.md-36):not(.md-48) {
       font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
     }
-    &.bold {
+    &.bold:not(.md-18):not(.md-24):not(.md-36):not(.md-48) {
       font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
     }
   }