frontend-plugin-api: accept IconElement in AuthProviderInfo

Update the `icon` field on `AuthProviderInfo` to accept `IconElement`
in addition to `IconComponent`, and update consumers in core-components
and user-settings to handle both types at runtime.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor

packages/frontend-plugin-api/report.api.md

@@ -316,7 +316,7 @@ export const atlassianAuthApiRef: ApiRef<
 export type AuthProviderInfo = {
   id: string;
   title: string;
-  icon: IconComponent;
+  icon: IconComponent | IconElement;
   message?: string;
 };
 

packages/frontend-plugin-api/src/apis/definitions/auth.ts

@@ -17,7 +17,7 @@
 /* eslint-disable @typescript-eslint/no-redeclare */
 
 import { ApiRef, createApiRef } from '../system';
-import { IconComponent } from '../../icons/types';
+import { IconComponent, IconElement } from '../../icons/types';
 import { Observable } from '@backstage/types';
 
 /**
@@ -54,8 +54,13 @@ export type AuthProviderInfo = {
 
   /**
    * Icon for the auth provider.
+   *
+   * @remarks
+   *
+   * Accepts either an `IconElement` (e.g. `<MyIcon />`) or an `IconComponent`
+   * (e.g. `MyIcon`). Prefer passing `IconElement`.
    */
-  icon: IconComponent;
+  icon: IconComponent | IconElement;
 
   /**
    * Optional user friendly messaage to display for the auth provider.