I have a problem on Dev, which i dont have on local,
on Dev Material Symbols Outlined icons are not loading, I have a two new css files, with defined fontfaces and css classes, with one being Material Icons that is working (warnings with regular variation, but working) and Material Symbols Outlined also with warning but not working, warnings are only on Dev
Does anybody have an idea what I’m doing wrong?
Warnings:
Failed to decode font: …
OTS parsing error: invalid sfntVersion: 1008821359
Dev warnings
local headers
local network
in Preview tab -normal font load
Dev headers
in Preview tab -blank white page
Dev network
Src/assets
styles.scss
@import 'src/assets/styles/material-icons.scss';
@import 'src/assets/styles/material-symbols-outlined.css';
material-symbols-outlined.css
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
src: url('/assets/icons-package/material-symbols-outlined2.woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
material-icons.scss
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons.woff2') format('woff2'),
local('MaterialIcons-Regular'),
url('/assets/icons-package/MaterialIcons-Regular.d1b99623aaa86364.woff2') format('woff2'),
url('/assets/icons-package/MaterialIcons-Regular.14b0bb77466d9f38.woff') format('woff'),
url('/assets/icons-package/MaterialIcons-Regular.fa58bcb97f2ed321.ttf') format('truetype');
}
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-outlined.woff2') format('woff2');
}
/* v108 */
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-round.woff2') format('woff2');
}
/* v109 */
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-sharp.woff2') format('woff2');
}
/* v112 */
@font-face {
font-family: 'Material Icons Two Tone';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-two-tone.woff2') format('woff2');
}
body {
--google-font-color-materialiconstwotone:none;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-round {
font-family: 'Material Icons Round';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-sharp {
font-family: 'Material Icons Sharp';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-two-tone {
font-family: 'Material Icons Two Tone';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
I’ve tried many things, path variations “../”, “src/path” “/assets/..” also in styles.scss, added specific path to icon-packages in angular.json assets, downloaded different woff2 files for symbols but nothing seems working.
jur1s77 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.