fixing social icons for issue https://github.com/keycloak/keycloak/issues/12047 (#12977)

themes/src/main/resources/theme/keycloak.v2/account/resources/public/layout.css

@@ -15,48 +15,6 @@
   }
 }
 
-/* Linked Accounts screen */
-.idp-icon-social {
-  width: 32px;
-  height: 32px;
-}
-
-#github-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_github_transparent.svg);
-}
-
-#linkedin-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_linkedin_transparent.svg);
-}
-
-#facebook-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_facebook_transparent.svg);
-}
-
-#google-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_google_transparent.svg);
-}
-
-#microsoft-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_microsoft_transparent.svg);
-}
-
-#instagram-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_instagram_transparent.svg);
-}
-
-#stackoverflow-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_stack_transparent.svg);
-}
-
-#twitter-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_twitter_transparent.svg);
-}
-
-#openshift-idp-icon-social {
-  background-image: url(../img/socialmedia/socialmedia_icons_openshift_transparent.svg);
-}
-
 /* Account Page screen */
 .personal-info-form .pf-c-form__group-control {
   max-width: 600px;

themes/src/main/resources/theme/keycloak.v2/account/src/app/content/linked-accounts-page/LinkedAccountsPage.tsx

@@ -24,7 +24,6 @@ import {
     DataListItemCells,
     DataListCell,
     DataListItemRow,
-    Divider,
     Label,
     PageSection,
     PageSectionVariants,
@@ -43,7 +42,15 @@ import {
     LinkIcon,
     OpenshiftIcon,
     PaypalIcon,
-    UnlinkIcon
+    UnlinkIcon,
+    FacebookIcon,
+    GoogleIcon,
+    InstagramIcon,
+    MicrosoftIcon,
+    TwitterIcon,
+    StackOverflowIcon,
+    LinkedinIcon,
+    GithubIcon
 } from '@patternfly/react-icons';
 
 import {HttpResponse} from '../../account-service/account.service';
@@ -222,14 +229,31 @@ class LinkedAccountsPage extends React.Component<LinkedAccountsPageProps, Linked
       const socialIconId = `${account.providerAlias}-idp-icon-social`;
       console.log(account);
       switch (true) {
+        case account.providerName.toLowerCase().includes('linkedin'):
+          return <LinkedinIcon id={socialIconId} size='lg'/>;
+        case account.providerName.toLowerCase().includes('facebook'):
+          return <FacebookIcon id={socialIconId} size='lg'/>;
+        case account.providerName.toLowerCase().includes('google'):
+          return <GoogleIcon id={socialIconId} size='lg'/>;
+        case account.providerName.toLowerCase().includes('instagram'):
+          return <InstagramIcon id={socialIconId} size='lg'/>;
+        case account.providerName.toLowerCase().includes('microsoft'):
+          return <MicrosoftIcon id={socialIconId} size='lg'/>;
         case account.providerName.toLowerCase().includes('bitbucket'):
           return <BitbucketIcon id={socialIconId} size='lg'/>;
+        case account.providerName.toLowerCase().includes('twitter'):
+          return <TwitterIcon id={socialIconId} size='lg'/>;
         case account.providerName.toLowerCase().includes('openshift'):
-          return <div className="idp-icon-social" id="openshift-idp-icon-social" />;
+          // return <div className="idp-icon-social" id="openshift-idp-icon-social" />;
+          return <OpenshiftIcon id={socialIconId} size='lg'/>;
         case account.providerName.toLowerCase().includes('gitlab'):
           return <GitlabIcon id={socialIconId} size='lg'/>;
+        case account.providerName.toLowerCase().includes('github'):
+          return <GithubIcon id={socialIconId} size='lg'/>;
         case account.providerName.toLowerCase().includes('paypal'):
           return <PaypalIcon id={socialIconId} size='lg'/>;
+        case account.providerName.toLowerCase().includes('stackoverflow'):
+          return <StackOverflowIcon id={socialIconId} size='lg'/>;
         case (account.providerName !== '' && account.social):
           return <div className="idp-icon-social" id={socialIconId}/>;
         default: