Failed to resolve entry for package "material-symbols"

[enheit]

After installing material-symbols using npm the following message is shown in the console

My steps

1. Run in the console npm i material-symbols@latest
2. Add import 'material-symbols'; at the top of the __layout.svelte file
3. Add <span class="material-symbols-outlined">face</span> to the component file
4. Open console
5. Error message is shown

Error message

Failed to resolve entry for package "material-symbols". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "material-symbols". The package may have incorrect main/module/exports specified in its package.json.

P.S. I asked this question on StackOverflow too

Update

As was able to run this package by changing the approach. I replaced step 2 with CSS imports.

Instead of

// __layout.svelte

import 'material-symbols';

...

I created 'app.css' file in the src folder. Added @import 'material-symbols'; at the top of its file. Imported app.css into __layout.svelte.

/* app.css */
@import 'material-symbols';

// __layout.svelte 

- import 'material-symbols';
+ import '../app.css';

...

It works

[marella]

The material-symbols package uses the browser field in package.json to specify the entry point which is index.css.
I haven't used svelte but it looks like internally it is using a tool called vite which doesn't seem to handle browser field properly (see vitejs/vite#7576).
So as a workaround, you can add import 'material-symbols/index.css'; to your svelte file or add @import 'material-symbols'; in CSS like you mentioned.

[marella]

I changed browser field to main to avoid such issues in future with other tools. So import 'material-symbols'; will also work now in svelte files. Please try again after installing the latest version 0.2.0.