How to serve assets from remote to shell application in angular module federation

Question

I have implemented the angular module federation (micro frond ends) for my angular applications but facing the rendering issue (broken) with svg icons those are available in remote application. But these svg icons are working when I run the remote application separately How we can load/serve asset images/files from remote to shell application ? and another issue I am facing with angular material which is not rendering properly example when click on dropdown and selecting any option, it is not hiding. Below is the my svg icons related code

import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';
import {Injectable} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class IconService {

  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
  }

  public registerIcons(): void {
    this.loadIcons(Object.values(Icons), './assets/svg/');
  }

  private loadIcons(iconKeys: string[], iconUrl: string): void {
    iconKeys.forEach(key => {
      this.matIconRegistry.addSvgIcon(key, this.domSanitizer.bypassSecurityTrustResourceUrl(`${iconUrl}/${key}.svg`))
    });
  }
}

export enum Icons {
  DeleteIcon = 'DeleteIcon',
  DownloadIcon = 'DownloadIcon',
  EditIcon = 'EditIcon',
  UploadIcon = 'UploadIcon',

} 

Html:

 <mat-icon svgIcon="UploadIcon" class="image-upload-icon-sizing" (click)="fileUploadInput.click()" *ngIf="imgSourceError"></mat-icon>

Shell application web configuration:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "parent",
    publicPath: 'http://localhost:4400/'
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        // name: "parent",
        // filename: "remoteEntry.js",
        // exposes: {
        //     './Component': './projects/parent/src/app/app.component.ts',
        // },        loadRemoteEntry
        
        // For hosts (please adjust)
        remotes: {
            "contentEditorTestApp": "http://localhost:4222/remoteEntry.js",
        },

        shared: share({
          "@ngrx/store": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/effects": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/store-devtools": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/core": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/material": {eager:true,singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          "@angular/cdk": {eager:true,singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          "@angular/forms": {eager:true,singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          ...sharedMappings.getDescriptors()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};

Remote application web configuration:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, '../../tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "contentEditorTestApp",
    publicPath: "http://localhost:4222/",
  },
  optimization: {
    runtimeChunk: false
  },   
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
        library: { type: "module" },

        // For remotes (please adjust)
        name: "contentEditorTestApp",
        filename: "remoteEntry.js",
        exposes: {
            './Module': './projects/content-editor-test-app/src/app/assets/asset.module.ts',
        },        
        
        // For hosts (please adjust)
        // remotes: {
        //     "mfe1": "http://localhost:3000/remoteEntry.js",

        // },

        shared: share({
          "@ngrx/store": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/effects": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@ngrx/store-devtools": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/core": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/common/http": { singleton: true, strictVersion: false, requiredVersion: 'auto' }, 
          "@angular/router": { singleton: true, strictVersion: false, requiredVersion: 'auto' },
          "@angular/material/tabs":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/list":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/icon":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/input":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/form-field":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/material/select":{singleton: true, strictVersion: false, requiredVersion: 'auto'},
          "@angular/cdk": {singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          "@angular/forms": {singleton: true, strictVersion: false, requiredVersion: 'auto',includeSecondaries: true},
          ...sharedMappings.getDescriptors()
        })
        
    }),
    sharedMappings.getPlugin()
  ],
};