Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to achieve the desired outcome. Here is a snippet from my CSS where I am adding @font-face:
@font-face {
font-family: 'Icons';
src: url(data:font/ttf;charset=utf-8;base64,<ttf file encoded to base64>) format('truetype'),
url(data:font/woff;charset=utf-8;base64,<woff file encoded to base64>) format('woff'),
url(data:font/svg;charset=utf-8;base64,<svg file encoded to base64>) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-uniF085:before {
content: "\f085";
}
To prevent content security policy (CSP) issues, I converted my icon files (.ttf, .woff, .svg, .eot) to base64 and embedded them into my controller CSS. However, upon running the application, all I see in Chromium is the default square box instead of the intended icon. There are no errors displayed on the console or browser. I am curious if anyone has successfully implemented custom or external icons/fonts in Chrome Packaged apps. Any insights or workarounds would be greatly appreciated.