UWPアプリケーションでGoogleマテリアルアイコンを使用する

Question

現在、Windowsストア用のJavaScriptベースのUWPアプリを開発中です。私は、Webアプリケーション用にAngular 2で記述したコードをUWPアプリケーションに直接移行しています。私の最後のハードルは、それを生き生きとさせる前に、私がテストしているときに、私が使っている重要なアイコンのどれもUWPアプリケーション内に表示されていないということです。参考のために

：HTMLページ内Live Website

リンクタグ

材料-icons.cssファイルの内容。私はVS 2015を使ってフォントファイルをbase64に変換しました。私は、この変換を正しく

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

TLDRが表示されていない角度成分内

@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; 
} 

コードを行うか否かを同じエンド結果有します。 GoogleのマテリアルアイコンをUWPアプリケーションで正しく表示するにはどうすればよいですか？

Answer 1

Googleの素材アイコンがUWPアプリケーションで正しく表示されるようにするにはどうすればよいですか？

アイコンフォントを自己ホストする場合は、cssにWinRT固有のURIスキームを使用する必要があります。 WinRTスキームの詳細については、URI schemes that are specific to a Windows Runtime appを参照してください。例については

：あなたセルフホストアプリケーションのアイコンフォントならば、あなたはms-appx:///スキームを使用する必要があります。

1. は、アプリケーションフォルダにicon fontをコピー：

2. 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'; 
   } 
   

3. は素材のアイコンを使用します。

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

私は角2バージョン材質アイコンをしようとしなかったが、私はそれがまた、正常に動作することができます信じています。