material design icons are not displayed in dropdown

[fabienmoyon]

CURRENT

1. In the sidebar, dropdown settings-overlay component don't display material design icons

1. In the header, dropdown profile-menu component don't display material design icons

EXPECTED

TO DO

• [ ] display material design icons

[tuanlc]

Information: This error appears only on dev platform with production deployment

[tuanlc]

The reason, in the frontend, we setup default icon for angular material:

$mdIconProvider.defaultIconSet('images/mdi/mdi.svg', 24);

And this performs a request to ESN backend to get the mdi.svg resource.

Why does it work on devServer?

Because with Webpack devServer proxy, we forward the request from localhost:9900 to server base URL, then the request is:

https://dev.open-paas.org/images/mdi/mdi.svg

And it works like before in the old code base

Why production deployment on DEV server doesn't work?

Because the base URL of SPA has additional route: https://dev.open-paas.org/contacts/ Then the mdi request becomes:

https://dev.open-paas.org/contacts/images/mdi/mdi.svg

And the request is 404

[tuanlc]

Solution:

We need to make mdi.svg available on any mode of deployment. And we should not send the request to server to get this kind of resource like we did for templates.

And because we have 2 places to set default icon for material at core and inbox

So solution is serving the mdi.svg in frontend and having 1 global config block to set default icon

Steps:

• [x] Serve mdi.svg in esn-frontend-common-libs
• [x] Have 1 config block to set default icon in esn.material module
• [x] Require esn.material module in SPAs
• [x] Remove the config in inbox & esn.user-profile modules