@import & global built in functions are deprecated and will be removed in Dart Sass 3.0.0

[SeraphCoding]

Use @use instead and explicitly use sass:string instead.

See: https://sass-lang.com/documentation/breaking-changes/import/

PR: #43

[JuNe98]

Same Problem here

@marella can you please have a look at the suggested PR of @SeraphCoding ?

[SeraphCoding]

Same Problem here

@marella can you please have a look at the suggested PR of @SeraphCoding ?

#43 (comment)

Check out this comment. Fontsource is a viable alternative.

[JuNe98]

I have implemented a workaround for this issue. I use patch-package to patch the package and implement the following patches for them:

material-symbols+0.27.2.patch:

diff --git a/node_modules/material-symbols/index.scss b/node_modules/material-symbols/index.scss
index 4dc4264..f94c012 100644
--- a/node_modules/material-symbols/index.scss
+++ b/node_modules/material-symbols/index.scss
@@ -1,3 +1,3 @@
-@import 'outlined';
-@import 'rounded';
-@import 'sharp';
+@use 'outlined';
+@use 'rounded';
+@use 'sharp';
diff --git a/node_modules/material-symbols/outlined.scss b/node_modules/material-symbols/outlined.scss
index 428f86e..8e6edd3 100644
--- a/node_modules/material-symbols/outlined.scss
+++ b/node_modules/material-symbols/outlined.scss
@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as core;
 
-@include material-symbols-font('Material Symbols Outlined');
+@include core.material-symbols-font('Material Symbols Outlined');
diff --git a/node_modules/material-symbols/rounded.scss b/node_modules/material-symbols/rounded.scss
index d4130a2..44b4728 100644
--- a/node_modules/material-symbols/rounded.scss
+++ b/node_modules/material-symbols/rounded.scss
@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as core;
 
-@include material-symbols-font('Material Symbols Rounded');
+@include core.material-symbols-font('Material Symbols Rounded');
diff --git a/node_modules/material-symbols/sharp.scss b/node_modules/material-symbols/sharp.scss
index 6770306..44d6727 100644
--- a/node_modules/material-symbols/sharp.scss
+++ b/node_modules/material-symbols/sharp.scss
@@ -1,3 +1,3 @@
-@import 'core';
+@use 'core' as core;
 
-@include material-symbols-font('Material Symbols Sharp');
+@include core.material-symbols-font('Material Symbols Sharp');

You just have to put the above file into a patches folder in your root directory and add following script in your package.json:

"scripts": {
   ...
    "postinstall": "patch-package"
  },

Now perform a install npm i and you can change from @import 'material-symbols' to @use 'material-symbols' in you styles.scss file.

Hope I can help you, because it seems there won't be changes applied to the package soon.

@SeraphCoding I had to add the namespace core before the mixins to make the changes running suggested in your PR.