[v17] render AWS account icon for Identity Center account app (#50284)

* aws account icon for identity center account app

* remove svg class

web/packages/design/src/ResourceIcon/icons.ts

@@ -47,6 +47,7 @@ import auth0Light from './assets/auth0-light.svg';
 import avalara from './assets/avalara.svg';
 import awsDark from './assets/aws-dark.svg';
 import awsLight from './assets/aws-light.svg';
+import awsAccount from './assets/aws-account.svg';
 import azure from './assets/azure.svg';
 import bill from './assets/bill.svg';
 import bonusly from './assets/bonusly.svg';
@@ -333,6 +334,7 @@ export {
   avalara,
   awsDark,
   awsLight,
+  awsAccount,
   azure,
   bill,
   bonusly,

web/packages/design/src/ResourceIcon/resourceIconSpecs.ts

@@ -59,6 +59,7 @@ export const resourceIconSpecs = {
   auth0: { dark: i.auth0Dark, light: i.auth0Light },
   avalara: forAllThemes(i.avalara),
   aws: { dark: i.awsDark, light: i.awsLight },
+  awsaccount: forAllThemes(i.awsAccount),
   azure: forAllThemes(i.azure),
 
   bill: forAllThemes(i.bill),

web/packages/shared/components/UnifiedResources/shared/guessAppIcon.ts

@@ -22,10 +22,12 @@ import {
   iconNames,
 } from 'design/ResourceIcon';
 
+import { AppSubKind } from 'teleport/services/apps';
+
 import { UnifiedResourceApp } from '../types';
 
 export function guessAppIcon(resource: UnifiedResourceApp): ResourceIconName {
-  const { awsConsole = false, name, friendlyName, labels } = resource;
+  const { awsConsole = false, name, friendlyName, labels, subKind } = resource;
 
   // Label matching takes precedence and we can assume it can be a direct lookup
   // since we expect a certain format.
@@ -41,6 +43,9 @@ export function guessAppIcon(resource: UnifiedResourceApp): ResourceIconName {
   if (awsConsole) {
     return 'aws';
   }
+  if (subKind === AppSubKind.AwsIcAccount) {
+    return 'awsaccount';
+  }
 
   const app = {
     name: withoutWhiteSpaces(name)?.toLocaleLowerCase(),