Web shows generic icons instead of provider logos

src/Schuly.Frontend/src/app/pages/settings/accounts-card.ts

@@ -61,7 +61,7 @@ const STATUS: Record<LinkedAccountStatus, { label: string; dot: string; tone: st
           @for (group of store.groups(); track group.providerId) {
             <div class="flex flex-col gap-2">
               <div class="flex items-center gap-2.5">
-                <app-provider-icon [icon]="group.provider?.icon" />
+                <app-provider-icon [icon]="group.provider?.icon" [providerId]="group.providerId" />
                 <div class="grid min-w-0">
                   <h4 class="text-sm font-semibold">{{ group.name }}</h4>
                   @if (group.provider?.description; as description) {

src/Schuly.Frontend/src/app/pages/settings/link-dialog.ts

@@ -104,7 +104,7 @@ type Mode = { kind: 'add' } | { kind: 'reauth'; account: LinkedAccountDto };
                     [attr.data-autofocus]="$first ? '' : null"
                     (click)="pick(provider)"
                   >
-                    <app-provider-icon [icon]="provider.icon" />
+                    <app-provider-icon [icon]="provider.icon" [providerId]="provider.id" />
                     <span class="flex min-w-0 flex-1 flex-col">
                       <span class="text-sm font-medium">{{ provider.displayName }}</span>
                       @if (provider.description) {

src/Schuly.Frontend/src/app/shared/provider-icon.ts

@@ -3,6 +3,13 @@ import { NgIcon, provideIcons } from '@ng-icons/core';
 import { LinkIconDto } from '../core/linking-api';
 import { providerIconName, providerIcons } from '../core/provider-icons';
 
+/** The real logos of the built-in providers, the same ones the app bundles. */
+const bundledLogos: Record<string, string> = {
+  schulnetz: '/providers/schulnetz.webp',
+  odaorg: '/providers/odaorg.webp',
+  microsoft: '/sso-icons/microsoft.svg',
+};
+
 /** A provider's icon: its Lucide name through ng-icons, or the host-served sanitized SVG through an img. Always decorative: the name is printed beside it. */
 @Component({
   selector: 'app-provider-icon',
@@ -19,6 +26,9 @@ import { providerIconName, providerIcons } from '../core/provider-icons';
 })
 export class ProviderIcon {
   readonly icon = input<LinkIconDto | null | undefined>(null);
-  protected readonly svgUrl = computed(() => this.icon()?.svgUrl || null);
+  readonly providerId = input<string | null | undefined>(null);
+  protected readonly svgUrl = computed(
+    () => bundledLogos[this.providerId() ?? ''] ?? (this.icon()?.svgUrl || null),
+  );
   protected readonly name = computed(() => providerIconName(this.icon()?.lucide));
 }