search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.28k stars 5.03k forks source link

How to use MDL in a Chrome Packaged Application ? #999

Closed olivierauverlot closed 9 years ago

olivierauverlot commented 9 years ago

hi,

I want to use Material Design Lite in a Chrome Packaged Application. That seems simple but my tries failed :-( With the Chrome Dev Editor, I created a new project for a Javascript Chrome App and included material.min.css, material.min.js, the Roboto font and the icons with the HTML code:

<link rel="stylesheet" href="material.min.css"> 
<script src="material.min.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

When I launch the program, the result is bad because the Roboto font and icons can't be loaded by the security manager of Chrome. That seems logical because I want to use an external resource. Moreover, that's not correct for a packaged application that must running offline.

Someone know how to using correctly Material Design Lite in a Chrome packaged application ?

Best regards Olivier ;-)

kybarg commented 9 years ago

@olivierauverlot Why not to add fonts as local resources? There is guide how to do it with iconic font http://google.github.io/material-design-icons/ 2nd paragraph The same is with Roboto font https://www.google.com/fonts#UsePlace:use/Collection:Roboto (download button at the right top)

addyosmani commented 9 years ago

As @kybarg kindly pointed out, the right way to tackle this is to use local versions of the packages. For the icons and Roboto both can be included as a downloaded/offline package and should work just as well.

macpham commented 8 years ago

Thanks for the answer :+1: