CSS icons (possibly urls?) not working when using style modules or importing an external stylesheet

[jimsimon-cengage]

We're trying to use some icons from icomoon (https://icomoon.io/), but they're not working when the provided CSS is imported.

<dom-module id="my-icon">
     <link rel="import" type="css" href="style.css">
     <template>
          <div class="icon-assign"></div>
     </template>
</dom-module>

If we change <link rel="import" type="css" href="style.css"> to <link rel="stylesheet" href="style.css"> it works, but breaks style encapsulation. We also tried using the new style modules introduced in 1.1, and that did not work either. In both cases, the styles end up rendering as an empty placeholder box, and the network pane of Chrome's dev tools shows no requests being made for the icomoon eot/woff2/ttf/etc files.

Here's the contents of style.css:

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?opjtvy');
    src:url('fonts/icomoon.eot?opjtvy#iefix') format('embedded-opentype'),
        url('fonts/icomoon.woff2?opjtvy') format('woff2'),
        url('fonts/icomoon.ttf?opjtvy') format('truetype'),
        url('fonts/icomoon.woff?opjtvy') format('woff'),
        url('fonts/icomoon.svg?opjtvy#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-eye-slash:before {
    content: "\f070";
}
.icon-th:before {
    content: "\f00a";
}
.icon-th-list:before {
    content: "\f00b";
}
.icon-arrow-left3:before {
    content: "\f060";
}
.icon-arrow-right3:before {
    content: "\f061";
}
.icon-arrow-up3:before {
    content: "\f062";
}
.icon-arrow-down3:before {
    content: "\f063";
}
.icon-eye2:before {
    content: "\f06e";
}
.icon-key3:before {
    content: "\f084";
}
.icon-envelope:before {
    content: "\f0e0";
}
.icon-music2:before {
    content: "\f001";
}
.icon-search2:before {
    content: "\f002";
}
.icon-envelope-o:before {
    content: "\f003";
}
.icon-star:before {
    content: "\f005";
}
.icon-search-plus:before {
    content: "\f00e";
}
.icon-search-minus:before {
    content: "\f010";
}
.icon-cog2:before {
    content: "\f013";
}
.icon-trash-o:before {
    content: "\f014";
}
.icon-file-o:before {
    content: "\f016";
}
.icon-flag3:before {
    content: "\f024";
}
.icon-book2:before {
    content: "\f02d";
}
.icon-print:before {
    content: "\f02f";
}
.icon-pencil3:before {
    content: "\f040";
}
.icon-map-marker:before {
    content: "\f041";
}
.icon-thumbs-o-up:before {
    content: "\f087";
}
.icon-thumbs-o-down:before {
    content: "\f088";
}
.icon-external-link:before {
    content: "\f08e";
}
.icon-sign-in:before {
    content: "\f090";
}
.icon-unlock:before {
    content: "\f09c";
}
.icon-feed5:before {
    content: "\f09e";
}
.icon-wrench3:before {
    content: "\f0ad";
}
.icon-caret-down:before {
    content: "\f0d7";
}
.icon-caret-up:before {
    content: "\f0d8";
}
.icon-caret-left:before {
    content: "\f0d9";
}
.icon-caret-right:before {
    content: "\f0da";
}
.icon-angle-left:before {
    content: "\f104";
}
.icon-angle-right:before {
    content: "\f105";
}
.icon-angle-up:before {
    content: "\f106";
}
.icon-angle-down:before {
    content: "\f107";
}
.icon-folder-o:before {
    content: "\f114";
}
.icon-folder-open-o:before {
    content: "\f115";
}
.icon-flag-o:before {
    content: "\f11d";
}
.icon-question2:before {
    content: "\f128";
}
.icon-info2:before {
    content: "\f129";
}
.icon-exclamation:before {
    content: "\f12a";
}
.icon-microphone:before {
    content: "\f130";
}
.icon-microphone-slash:before {
    content: "\f131";
}
.icon-ellipsis-h:before {
    content: "\f141";
}
.icon-ellipsis-v:before {
    content: "\f142";
}
.icon-eur:before {
    content: "\f153";
}
.icon-gbp:before {
    content: "\f154";
}
.icon-dollar:before {
    content: "\f155";
}
.icon-inr:before {
    content: "\f156";
}
.icon-cny:before {
    content: "\f157";
}
.icon-rouble:before {
    content: "\f158";
}
.icon-krw:before {
    content: "\f159";
}
.icon-bitcoin:before {
    content: "\f15a";
}
.icon-bug2:before {
    content: "\f188";
}
.icon-dot-circle-o:before {
    content: "\f192";
}
.icon-bank:before {
    content: "\f19c";
}
.icon-graduation-cap:before {
    content: "\f19d";
}
.icon-spotify:before {
    content: "\f1bc";
}
.icon-file-pdf-o:before {
    content: "\f1c1";
}
.icon-file-word-o:before {
    content: "\f1c2";
}
.icon-file-excel-o:before {
    content: "\f1c3";
}
.icon-file-powerpoint-o:before {
    content: "\f1c4";
}
.icon-file-image-o:before {
    content: "\f1c5";
}
.icon-file-archive-o:before {
    content: "\f1c6";
}
.icon-file-audio-o:before {
    content: "\f1c7";
}
.icon-file-movie-o:before {
    content: "\f1c8";
}
.icon-file-code-o:before {
    content: "\f1c9";
}
.icon-cc-visa:before {
    content: "\f1f0";
}
.icon-cc-mastercard:before {
    content: "\f1f1";
}
.icon-cc-discover:before {
    content: "\f1f2";
}
.icon-cc-amex:before {
    content: "\f1f3";
}
.icon-cc-paypal:before {
    content: "\f1f4";
}
.icon-cc-stripe:before {
    content: "\f1f5";
}
.icon-alert:before {
    content: "\e600";
}
.icon-assign:before {
    content: "\e601";
}
.icon-bell:before {
    content: "\e602";
}
.icon-bubble:before {
    content: "\e603";
}
.icon-calendar:before {
    content: "\e604";
}
.icon-check:before {
    content: "\e614";
}
.icon-clock .path1:before {
    content: "\e615";
    color: rgb(255, 255, 255);
}
.icon-clock .path2:before {
    content: "\e616";
    margin-left: -0.97265625em;
    color: rgb(65, 64, 66);
}
.icon-clock .path3:before {
    content: "\e617";
    margin-left: -0.97265625em;
    color: rgb(65, 64, 66);
}
.icon-extracredit:before {
    content: "\e618";
}
.icon-flashcards:before {
    content: "\e61a";
}
.icon-lightning:before {
    content: "\e61b";
}
.icon-list:before {
    content: "\e61c";
}
.icon-pin:before {
    content: "\e61e";
}
.icon-profile:before {
    content: "\e61f";
}
.icon-reading:before {
    content: "\e620";
}
.icon-target:before {
    content: "\e621";
}
.icon-timed:before {
    content: "\e622";
}
.icon-timer:before {
    content: "\e623";
}
.icon-video:before {
    content: "\e624";
}
.icon-wrench:before {
    content: "\e625";
}
.icon-home3:before {
    content: "\e628";
}
.icon-image:before {
    content: "\e633";
}
.icon-images:before {
    content: "\e634";
}
.icon-connection:before {
    content: "\e641";
}
.icon-copy:before {
    content: "\e652";
}
.icon-stack:before {
    content: "\e654";
}
.icon-cart:before {
    content: "\e660";
}
.icon-lifebuoy:before {
    content: "\e667";
}
.icon-phone:before {
    content: "\e668";
}
.icon-phone-hang-up:before {
    content: "\e669";
}
.icon-undo:before {
    content: "\e68b";
}
.icon-redo:before {
    content: "\e68c";
}
.icon-undo2:before {
    content: "\e68d";
}
.icon-redo2:before {
    content: "\e68e";
}
.icon-forward:before {
    content: "\e68f";
}
.icon-reply:before {
    content: "\e690";
}
.icon-spinner2:before {
    content: "\e6a1";
}
.icon-enlarge:before {
    content: "\e6af";
}
.icon-shrink:before {
    content: "\e6b0";
}
.icon-enlarge2:before {
    content: "\e6b1";
}
.icon-shrink2:before {
    content: "\e6b2";
}
.icon-lock:before {
    content: "\e6b5";
}
.icon-unlocked:before {
    content: "\e6b6";
}
.icon-pie-chart:before {
    content: "\e6c0";
}
.icon-stats-dots:before {
    content: "\e6c1";
}
.icon-stats-bars:before {
    content: "\e6c2";
}
.icon-stats-bars2:before {
    content: "\e6c3";
}
.icon-truck:before {
    content: "\e6d6";
}
.icon-list-numbered:before {
    content: "\e6df";
}
.icon-list3:before {
    content: "\e6e0";
}
.icon-list2:before {
    content: "\e6e1";
}
.icon-menu:before {
    content: "\e6e3";
}
.icon-menu2:before {
    content: "\e6e4";
}
.icon-menu3:before {
    content: "\e6e5";
}
.icon-menu4:before {
    content: "\e6e6";
}
.icon-download2:before {
    content: "\e6eb";
}
.icon-upload2:before {
    content: "\e6ec";
}
.icon-link:before {
    content: "\e6f1";
}
.icon-attachment:before {
    content: "\e6f3";
}
.icon-bookmark:before {
    content: "\e6f8";
}
.icon-star-half:before {
    content: "\e6fe";
}
.icon-star-full:before {
    content: "\e6ff";
}
.icon-warning:before {
    content: "\e72d";
}
.icon-notification:before {
    content: "\e72e";
}
.icon-question:before {
    content: "\e72f";
}
.icon-plus:before {
    content: "\e730";
}
.icon-minus:before {
    content: "\e731";
}
.icon-info:before {
    content: "\e732";
}
.icon-cancel-circle:before {
    content: "\e733";
}
.icon-blocked:before {
    content: "\e734";
}
.icon-cross:before {
    content: "\e735";
}
.icon-checkmark:before {
    content: "\e736";
}
.icon-play2:before {
    content: "\e73b";
}
.icon-pause:before {
    content: "\e73c";
}
.icon-stop:before {
    content: "\e73d";
}
.icon-previous:before {
    content: "\e73e";
}
.icon-next:before {
    content: "\e73f";
}
.icon-backward:before {
    content: "\e740";
}
.icon-forward2:before {
    content: "\e741";
}
.icon-play3:before {
    content: "\e742";
}
.icon-pause2:before {
    content: "\e743";
}
.icon-stop2:before {
    content: "\e744";
}
.icon-backward2:before {
    content: "\e745";
}
.icon-forward3:before {
    content: "\e746";
}
.icon-first:before {
    content: "\e747";
}
.icon-last:before {
    content: "\e748";
}
.icon-previous2:before {
    content: "\e749";
}
.icon-next2:before {
    content: "\e74a";
}
.icon-circle-up:before {
    content: "\e767";
}
.icon-circle-right:before {
    content: "\e768";
}
.icon-circle-down:before {
    content: "\e769";
}
.icon-circle-left:before {
    content: "\e76a";
}
.icon-paragraph-left:before {
    content: "\e79d";
}
.icon-paragraph-center:before {
    content: "\e79e";
}
.icon-paragraph-right:before {
    content: "\e79f";
}
.icon-paragraph-justify:before {
    content: "\e7a0";
}
.icon-indent-increase:before {
    content: "\e7a1";
}
.icon-indent-decrease:before {
    content: "\e7a2";
}
.icon-apple:before {
    content: "\e7e5";
}
.icon-android:before {
    content: "\e7e7";
}
.icon-windows8:before {
    content: "\e7e9";
}

[adewinter]

:+1:

[dfreedm]

Can you post a jsbin of a repo? That'd be very helpful.

[jimsimon-cengage]

This is actually the same issue as #2386. The style shimmer doesn't seem to be able to handle @font-face rules. If I recall correctly, this issue is only present in non-Chrome browsers. If you still want a test/demo repo, please let me know and I'll create one.

[chadcampbell]

:+1:

[dfreedm]

Closing in favor of #2386

[asalam345]

in my case font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\e7e9"; these lines are mandatory