feat(ValidationMessage): icon when error

.changeset/clean-lizards-chew.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+ValidationMessage: Add icon when `error={true}`

packages/css/validation-message.css

@@ -1,9 +1,15 @@
 .ds-validation-message {
+  --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='20' viewBox='0 0 23 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4692 0.58824C10.9273 -0.19608 12.0727 -0.19608 12.5308 0.58824L22.8388 18.2353C23.2969 19.0196 22.7242 20 21.808 20H1.19204C0.27577 20 -0.29689 19.0196 0.16124 18.2353L10.4692 0.58824ZM11.5001 6.17627C12.1574 6.17627 12.6903 6.70297 12.6903 7.35267V11.7645C12.6903 12.4143 12.1574 12.941 11.5001 12.941C10.8427 12.941 10.3098 12.4143 10.3098 11.7645V7.35267C10.3098 6.70297 10.8427 6.17627 11.5001 6.17627ZM11.5001 16.4706C12.1574 16.4706 12.6903 15.9439 12.6903 15.2941C12.6903 14.6444 12.1574 14.1177 11.5001 14.1177C10.8427 14.1177 10.3098 14.6444 10.3098 15.2941C10.3098 15.9439 10.8427 16.4706 11.5001 16.4706Z' fill='%23C22020'/%3E%3C/svg%3E");
+  --dsc-validation-message-icon-size: 1.2em;
+  --dsc-validation-message-icon-gap: var(--ds-spacing-2);
+
   margin: 0;
 
   @composes ds-validation-message--md from './base/base.css';
 
   &[data-size='xs'] {
+    --dsc-validation-message-icon-gap: var(--ds-spacing-1);
+
     @composes ds-validation-message--xs from './base/base.css';
   }
 
@@ -17,5 +23,16 @@
 
   &[data-error] {
     color: var(--ds-color-danger-text-subtle);
+
+    &::before {
+      content: '';
+      display: inline-block;
+      height: var(--dsc-validation-message-icon-size);
+      width: var(--dsc-validation-message-icon-size);
+      margin-right: var(--dsc-validation-message-icon-gap);
+      vertical-align: top;
+      background-color: currentcolor;
+      mask: var(--dsc-validation-message-icon-url) center/contain no-repeat;
+    }
   }
 }