9

I have Chrome Packaged App written in AngularDart and trying to get some external icons to make the app look nicer, but couldn't find any example over the net. Tried many things along with the below workaround but couldn't get it working. I am adding the @font-face to my css as below :

@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";
}

I am trying to avoid CSP (content security policy) issues by converting my icon files: .ttf, .woff, .svg, .eot to base64 and embedding them into my controller CSS but when I run the application all I see in the chromium is the default square box instead of the icon I am referencing (); no error on the console or on the chromium browser. I am wondering if anyone got custom or external icons / fonts working with the Chrome Packaged apps. Please let me know if there is a workaround in anyway.

Devin
  • 7,690
  • 6
  • 39
  • 54
UCJava
  • 307
  • 4
  • 19
  • I am using PNG icons in the app as a work around for now, but it would be nice to be able to use .ttf, .woff, .svg, .eot files in a chrome packaged app. Please post a solution if you are able to use any form of those in a angulart-dart chrome packaged app. – UCJava Sep 12 '14 at 16:41
  • Maybe remove the single quote from 'Icons' in the part you're actually setting it? I know in a normal css file you don't use quotes after you've already specified the string in the @font-face bit. – shan Sep 14 '14 at 21:41
  • 1
    This could be relevant https://developer.chrome.com/extensions/manifest/web_accessible_resources – Günter Zöchbauer Oct 04 '14 at 13:09
  • 1
    Packaged apps don't have the web_accessible_resources in the manifast.json documentation : https://developer.chrome.com/apps/manifest – UCJava Oct 09 '14 at 19:28
  • well after some tries, I see the issue here is not embedding the the files into the component, but actually getting the font-face work inside the shadowDOM which doesn't seem to happen, once I disable shadowDOM for my component it can use the global styles and the icons work fine as base64 encoded, but off course disabling shadowDOM masses up the whole component page design which I would need to refactor. I still think there should be a way to use font-face in shadowDOM. – UCJava Nov 03 '14 at 20:55

2 Answers2

1

well after some tries, I see the issue here is not embedding the the files into the component, but actually getting the font-face work inside the shadowDOM which doesn't seem to happen, once I disable shadowDOM for my component it can use the global styles and the icons work fine as base64 encoded, but off course disabling shadowDOM masses up the whole component page design which I would need to refactor. I still think there should be a way to use font-face in shadowDOM.

UCJava
  • 307
  • 4
  • 19
0

Try the IcoMoon https://icomoon.io/app/ Once you import your icons, it will generate CSS files with the fonts embedded (off by default, change in preferences) Worked well for me

ochakov
  • 348
  • 4
  • 7
  • well after some tries, I see the issue here is not embedding the the files into the component, but actually getting the font-face work inside the shadowDOM which doesn't seem to happen, once I disable shadowDOM for my component it can use the global styles and the icons work fine as base64 encoded, but off course disabling shadowDOM masses up the whole component page design which I would need to refactor. I still think there should be a way to use font-face in shadowDOM. – UCJava Nov 03 '14 at 20:55