added icon inside textfield

frontend/libs/studio-components/src/components/StudioTextField/StudioIconTextfield/StudioIconTextfield.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { type TextfieldProps, Textfield } from '@digdir/design-system-react';
-import classes from './StudioIconTextfield.module.css';
 
 export type StudioIconTextfieldProps = {
   icon: React.ReactNode;
 } & TextfieldProps;
 
 export const StudioIconTextfield = ({ icon, ...rest }: StudioIconTextfieldProps) => {
   return (
-    <div className={classes.container}>
-      <div>{icon}</div>
+    <div>
       <Textfield {...rest} error={undefined} />
     </div>
   );

frontend/packages/ux-editor/src/components/config/editModal/EditComponentId.module.css

@@ -1,11 +1,4 @@
-.componentId {
+.prefixKeyIcon {
   color: var(--fds-semantic-text-neutral-default);
-}
-
-.KeyVerticalIcon {
-  color: var(--fds-semantic-text-neutral-default);
-}
-
-.pencilIcon {
-  margin-left: auto;
+  font-size: 18px;
 }

frontend/packages/ux-editor/src/components/config/editModal/EditComponentId.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { FormComponent } from '../../../types/FormComponent';
 import { StudioTextField } from '@studio/components/src/components/StudioTextField/StudioTextField';
+import { KeyVerticalIcon } from '@navikt/aksel-icons';
+import classes from './EditComponentId.module.css';
 
 export interface IEditComponentId {
   handleComponentUpdate: (component: FormComponent) => void;
@@ -24,7 +26,6 @@ export const EditComponentId = ({
   // - helpText
   // - Validation/Error handling
   // - onBlur improvement
-  // - show key icon inside textfield
   // - Move "ID: " to text resource
   // - Add Test for all components
 
@@ -38,10 +39,12 @@ export const EditComponentId = ({
           style: { paddingLeft: 0, paddingRight: 0 },
         }}
         inputProps={{
+          prefix: <KeyVerticalIcon className={classes.prefixKeyIcon} />,
           icon: undefined,
           value: component.id,
           onChange: (e) => handleIdChange(e.target.value),
           label: 'ID',
+          size: 'small',
         }}
       />
     </div>