0

I'm using the material icon support for developing a chrome extension. My main.css file contains the following snippets:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v7/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.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;
    word-wrap: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;

The CSS is included in the index page of the chrome extension and I'm attempting to use 3 icons from this library within a navigation bar like this:

<nav>
    <div class="nav-wrapper">
        <ul id="nav-mobile" class=" hide-on-med-and-down">
            <li><a href="#"><i class="material-icons left dp48">settings</i>Settings</a></li>
            <li><a href="#"><i class="material-icons left dp48">web</i>Our Page</a></li>
            <li><a href="#"><i class="material-icons left dp48">payment</i>Donate</a></li>
        </ul>
    </div>
</nav>

When opening this html page in a classic manner the icons are rendered but when importing the unpacked extension in Chrome, the icons are not rendered and nor is the link text (Settings, Our Page, Donate). Also, no errors occur in the dev console when inspecting the extension popup.

My guesses are that this problem is caused by loading these icons/fonts from a remote location. Is there any way to make them work that does not involve downloading resources?

Mircea Man
  • 53
  • 9
  • 1
    What happens if you add a CSP permission for `fonts.gstatic.com` [like here](http://stackoverflow.com/a/19991956/3959875)? BTW if I understood correctly you don't want to include the webfonts inside your extension's package? Why? It'd be much faster, no need to download anything. And please don't call extensions `plugins`, those are totally different things. – wOxxOm Sep 11 '15 at 17:31
  • Yep, you're right, better to include the webfonts inside my package. Works now. Thanks! – Mircea Man Sep 11 '15 at 18:32

0 Answers0