salesforce-ux/design-system lib is not displaying slds icons in lwc oss

Question

I am using LWC oss framework to play with lightning-base-components npm package. I have used 'salesforce-ux/design-system' to use SLDS.I could use base components as lightning web components with SLDS. But problem here is, SLDS Icons are not rendering on the app. I have imported salesforce-ux/design-system css file in the public/index.html file but icons are not cmoing up on ui though they are present in public/assets folder. As I am new to opensource web application frameworks, I am not able to figure out if I am missing any..

html code:

    <p id="action" class="slds-box slds-text-heading_small">Action icons represent actions a user can take. The default
    size of action icons are larger than the others. <br /><br />
    <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon>
    <lightning-icon icon-name="action:delete" alternative-text="Delete" title="Delete"></lightning-icon>
    <lightning-icon icon-name="action:new_note" alternative-text="New note" title="New note"></lightning-icon>
    <lightning-icon icon-name="action:preview" alternative-text="Preview" title="Preview"></lightning-icon>
</p>

Output where icons are missing.

public/index.html

 <link
  rel="stylesheet"
  href="assets/styles/salesforce-lightning-design-system.min.css"
/>

express server.js

    app.get("*", (req, res) => {
  return res.sendFile(path.resolve(__dirname, "../public/index.html"));
});

app.listen(port, () =>
  console.log(`Example app listening at http://localhost:${port}`)
);

(async () => {
  const watcher = await rollup.watch(config);
  watcher.on('event', (event) => {
    if (event.code === 'START') {
      console.log('Compiling...');
    }
    if (event.code === "END") {
      console.log('Done!');
    }
  });
})();

Answer 1

lightning-base-components does not use the SLDS standard assets to display icons, but rather uses a series of internal templates that are dynamically chosen at runtime. These are located in various template components, such as lightning/iconSvgTemplatesStandard. The build script for LWR appears to use path.join to form the complete module paths, but unfortunately, these components are not sanitized correctly. Looking at the compiled JavaScript for one of these components, you'll see it includes lines like:

import { default as standard_announcement } from '/1/module/esm/0/l/en-US/mi/lightning%2FiconSvgTemplatesStandard%23buildTemplates%5Cstandard%5Cannouncement.html%2Fv%2F1_19_6-alpha/latest/lightning_iconSvgTemplatesStandard_buildTemplates\standard\announcement_html.js';

If you scroll to the right, you'll see that it tries to include unescaped backslashes in the source:

...\standard\announcement_html.js

Which results in a runtime error that is logged to the console. This only happens on operating systems that use Windows path notation (i.e. Windows). On Linux systems, they will be properly rendered as:

..._standard_announcement_html.js

There's an old bug that reports this, but it was closed. I am working on building a patch for this. In the meantime, the solution is to make sure you're running in a proper Linux environment, such as Windows Subsystem for Linux (WSL) or a proper Linux host.