Wrap inference service in avatar for dark mode support (#212092)

## Summary

Wraps the logos in our service provider list in an avatar so they are
visible in dark mode.

![CleanShot 2025-02-21 at 09 34
11@2x](https://github.com/user-attachments/assets/5bc83ee3-265b-4a8f-a811-cc0d8fd1cfd6)

This does not change the selected state for a provider. These logos will
still look poorly in dark mode, but this seemed like a larger effort
(perhaps someone can help make that more seamless).

We could also just remove the logo when selected. The logos are
beneficial when finding a preferred service, but possibly less so once
I've chosen one.

![CleanShot 2025-02-21 at 09 34
19@2x](https://github.com/user-attachments/assets/00ee3cac-3e6d-4b77-ae00-a88dda62506e)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Samiul Monir <samiul.monir@elastic.co>
(cherry picked from commit 1a9315c)

x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_service_form_fields.tsx

@@ -97,14 +97,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
     }
   }, []);
 
-  const providerIcon = useMemo(
-    () =>
-      Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
-        ? SERVICE_PROVIDERS[config?.provider as ServiceProviderKeys].icon
-        : undefined,
-    [config?.provider]
-  );
-
   const providerName = useMemo(
     () =>
       Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
@@ -252,7 +244,7 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
         isDisabled={isEdit}
         isInvalid={isInvalid}
         fullWidth
-        icon={!config?.provider ? { type: 'sparkles', side: 'left' } : providerIcon}
+        icon={!config?.provider ? { type: 'sparkles', side: 'left' } : undefined}
       >
         <EuiFieldText
           onClick={toggleProviderPopover}
@@ -278,7 +270,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
       isEdit,
       onClearProvider,
       config?.provider,
-      providerIcon,
       toggleProviderPopover,
       handleProviderKeyboardOpen,
       providerName,

x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/providers/render_service_provider/service_provider.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiHighlight, EuiIcon } from '@elastic/eui';
+import { EuiAvatar, EuiHighlight } from '@elastic/eui';
 import React from 'react';
 
 import { ServiceProviderKeys } from '../../../constants';
@@ -118,7 +118,14 @@ export const ServiceProviderIcon: React.FC<ServiceProviderProps> = ({ providerKe
   const provider = SERVICE_PROVIDERS[providerKey];
 
   return provider ? (
-    <EuiIcon data-test-subj={`icon-service-provider-${providerKey}`} type={provider.icon} />
+    <EuiAvatar
+      name={providerKey}
+      data-test-subj={`icon-service-provider-${providerKey}`}
+      iconType={provider.icon}
+      color="#fff"
+      size="s"
+      type="space"
+    />
   ) : null;
 };