在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版材的图标，但我相信它也能正常工作。