diff --git a/package.json b/package.json
index 3b88df9..c42d0cb 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,8 @@
"@angular/cli": "^17.0.0",
"@angular/compiler-cli": "^17.0.0",
"@angular/language-service": "^17.0.0",
+ "@fontsource/material-icons": "^5.0.7",
+ "@fontsource/roboto": "^5.0.8",
"@types/jasmine": "~4.0.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^18.0.0",
diff --git a/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff b/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff
deleted file mode 100644
index b648a3e..0000000
Binary files a/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff and /dev/null differ
diff --git a/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff2 b/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff2
deleted file mode 100644
index 9fa2112..0000000
Binary files a/projects/demo/src/assets/fonts/MaterialIcons-Regular.woff2 and /dev/null differ
diff --git a/projects/demo/src/index.html b/projects/demo/src/index.html
index 1661ac3..3a08d15 100644
--- a/projects/demo/src/index.html
+++ b/projects/demo/src/index.html
@@ -18,10 +18,6 @@
-
diff --git a/projects/demo/src/scss/fonts.scss b/projects/demo/src/scss/fonts.scss
new file mode 100644
index 0000000..e39aa24
--- /dev/null
+++ b/projects/demo/src/scss/fonts.scss
@@ -0,0 +1,21 @@
+@import '@fontsource/roboto/300.css';
+@import '@fontsource/roboto/400.css';
+@import '@fontsource/roboto/500.css';
+@import '@fontsource/material-icons';
+
+.material-icons {
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px; /* Preferred icon size */
+ display: inline-block;
+ line-height: 1;
+ text-transform: none;
+ letter-spacing: normal;
+ word-wrap: normal;
+ white-space: nowrap;
+ direction: ltr;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ -moz-osx-font-smoothing: grayscale;
+}
diff --git a/projects/demo/src/styles.scss b/projects/demo/src/styles.scss
index b116910..5d9d7ea 100644
--- a/projects/demo/src/styles.scss
+++ b/projects/demo/src/styles.scss
@@ -1,14 +1,8 @@
@use "@angular/material" as mat;
+@import "scss/fonts";
@import "scss/themes";
@import "scss/core";
-@font-face {
- font-family: "Material Icons";
- font-style: normal;
- font-weight: 400;
- src: url("assets/fonts/MaterialIcons-Regular.woff") format("woff");
-}
-
$primary-color: mat.get-color-from-palette($candy-app-primary);
$accent-color: mat.get-color-from-palette($candy-app-accent);
$primary-color-dark: mat.get-color-from-palette($dark-primary);
@@ -154,11 +148,9 @@ mat-icon.mat-icon.ngx-mtp-theme-example {
// Include the default theme styles.
@include mat.all-component-themes($candy-app-theme);
-// @include mat.all-component-themes($candy-app-theme); // doesn't work yet
.dark-theme {
@include mat.all-component-colors($dark-theme);
- // @include mat.all-component-themes($dark-theme); // doesn't work yet
a {
&.mat-color-primary {
diff --git a/yarn.lock b/yarn.lock
index 84fdb6b..8bda831 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1742,6 +1742,16 @@
resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.0.tgz#0709e9f4cb252351c609c6e6d8d6779a8d25edff"
integrity sha512-+KpH+QxZU7O4675t3mnkQKcZZg56u+K/Ct2K+N2AZYNVK8kyeo/bI18tI8aPm3tvNNRyTWfj6s5tnGNlcbQRsA==
+"@fontsource/material-icons@^5.0.7":
+ version "5.0.7"
+ resolved "https://registry.yarnpkg.com/@fontsource/material-icons/-/material-icons-5.0.7.tgz#9d3d5654871e32ef509c168e90ee9dc008eecfbe"
+ integrity sha512-QNEk24i1KhV1MoZqpLHfD+T90N2U8lzYxyeHbr6qAWTJG7KgOMib4TA+RonS9vtBT4sw59L9e9Wd1vebXxOhOQ==
+
+"@fontsource/roboto@^5.0.8":
+ version "5.0.8"
+ resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.0.8.tgz#613b477a56f21b5705db1a67e995c033ef317f76"
+ integrity sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA==
+
"@humanwhocodes/config-array@^0.11.13":
version "0.11.13"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"