Material Design Lite 將 material-icons 的 url 設置在 local 端

• 在官網提共的icon設置方式如下
• <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
• @font-face { 
     font-family: 'Material Icons'; 
     font-style: normal; 
     font-weight: 400; 
     src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ 
     src: local('Material Icons'), 
     local('MaterialIcons-Regular'),
     url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
     url(https://example.com/MaterialIcons-Regular.woff) format('woff'), 
     url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');}
• .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; }
• 為了讓url改成不透過google提共的網站 , 先下載相關檔案
• 然後將檔案放至專案理 , 更改url目錄位置如下
• @font-face { font-family: 'Material Icons';   font-style: normal;   font-weight: 400;   src: url(../mdl2/webfont/MaterialIcons-Regular.eot); /* For IE6-8 */   src: local('Material Icons'),        local('MaterialIcons-Regular'),        url(../mdl2/webfont/MaterialIcons-Regular.woff2) format('woff2'), url(../mdl2/webfont/MaterialIcons-Regular.woff) format('woff'), url(../mdl2/webfont/MaterialIcons-Regular.ttf) format('truetype'); }
• 然後你的 <i class="material-icons">announcement</i> 就不會找不到icon