在UWP應用程序中使用Google材料圖標

Question

我目前正在爲Windows應用商店開發基於JavaScript的UWP應用程序，並將我在Angular 2中編寫的代碼用於我的Web應用程序，並將其直接轉換爲UWP應用程序。在實現它之前，我最後的一個障礙是，當我測試時，我正在使用的任何材質圖標都顯示在UWP應用程序中。

相關信息：html頁面

材料icons.css文件內容中Live Website

鏈接標記。我使用VS 2015將字體文件轉換爲base64。我有相同的最終結果I是否爲此轉換

@font-face 
{ 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('data:application/vnd.ms-fontobject;base64,{TRUNCATED} */ 
    src: local('Material Icons'), 
    local('MaterialIcons-Regular'), 
    url('data:font/x-woff2;base64,{TRUNCATED}'), 
    url('data:font/x-woff;base64,{TRUNCATED}'), 
    url('data:application/octet-stream;base64,{TRUNCATED}'); 
} 

.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; 
    white-space: nowrap; 
    word-wrap: normal; 
    direction: ltr; 
    -webkit-font-feature-settings: 'liga'; 
    -webkit-font-smoothing: antialiased; 
} 

角度成分中的代碼未正確顯示

<md-icon>dialpad</md-icon> 

TLDR;如何讓Google的材質圖標在UWP應用程序中正確顯示？

Answer 1

如何獲得谷歌的材料圖標在一個UWP應用程序正常顯示？

對於UWP應用程序，如果你想自承載圖標字體，你需要在你的css中使用WinRT特定的URI方案。有關WinRT方案的詳細信息，請參閱URI schemes that are specific to a Windows Runtime app。

例如：如果您自託管在您的應用程序的圖標字體，那麼你就需要使用ms-appx:///方案：

1. 複製icon font到您的應用程序文件夾：

1. 然後在default.css中添加以下CSS：

   @font-face { 
   font-family: 'Material Icons'; 
   font-style: normal; 
   font-weight: 400; 
   src: url(ms-appx:///iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ 
   src: local('Material Icons'), local('MaterialIcons-Regular'), 
       url(ms-appx:///iconfont/MaterialIcons-Regular.woff2) format('woff2'), 
       url(ms-appx:///iconfont/MaterialIcons-Regular.woff) format('woff'), 
       url(ms-appx:///iconfont/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'; 
   } 
   

2. 則從圖標素材：

   <i class="material-icons">dialpad</i> 
   

我沒有嘗試的角2版材的圖標，但我相信它也能正常工作。