Add Icon to roles (#10842)

## Context
Adding icon column to role table to distinguish roles.

<img width="621" alt="Screenshot 2025-03-13 at 11 02 37"
src="https://github.com/user-attachments/assets/dc7b121c-2901-4599-9638-d5dcdf443999"
/>

packages/twenty-front/src/modules/settings/roles/components/RolesTableRow.tsx

@@ -9,8 +9,8 @@ import {
   Avatar,
   IconChevronRight,
   IconLock,
-  IconUser,
   TooltipDelay,
+  useIcons,
 } from 'twenty-ui';
 import { Role } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
@@ -61,6 +61,9 @@ export const RolesTableRow = ({ role }: { role: Role }) => {
     navigateSettings(SettingsPath.RoleDetail, { roleId });
   };
 
+  const { getIcon } = useIcons();
+  const Icon = getIcon(role.icon ?? 'IconUser');
+
   return (
     <StyledTableRow
       key={role.id}
@@ -69,7 +72,7 @@ export const RolesTableRow = ({ role }: { role: Role }) => {
     >
       <TableCell>
         <StyledNameCell>
-          <IconUser size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
           {role.label}
           {!role.isEditable && (
             <StyledIconLockContainer>

packages/twenty-front/src/modules/settings/roles/graphql/fragments/roleFragment.ts

@@ -5,6 +5,7 @@ export const ROLE_FRAGMENT = gql`
     id
     label
     description
+    icon
     canUpdateAllSettings
     isEditable
     canReadAllObjectRecords

packages/twenty-front/src/modules/settings/roles/role-settings/components/RoleSettings.tsx

@@ -20,7 +20,7 @@ const StyledInputContainer = styled.div`
 `;
 
 type RoleSettingsProps = {
-  role: Pick<Role, 'id' | 'label' | 'description'>;
+  role: Pick<Role, 'id' | 'label' | 'description' | 'icon'>;
 };
 
 export const RoleSettings = ({ role }: RoleSettingsProps) => {
@@ -30,7 +30,7 @@ export const RoleSettings = ({ role }: RoleSettingsProps) => {
         <StyledInputContainer>
           <IconPicker
             disabled={true}
-            selectedIconKey={'IconUser'}
+            selectedIconKey={role.icon ?? 'IconUser'}
             onChange={() => {}}
           />
         </StyledInputContainer>