マテリアルアイコンをオフラインでホストする方法は？

これが非常に単純な質問であれば申し訳ありませんが、Googleマテリアルアイコンを使用せずに

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

？

ユーザーがインターネットに接続していない場合でもアプリでアイコンを表示できるようにしたい

方法2.セルフホスティング 開発者ガイド

github（アセット：zipファイル）から最新リリースをダウンロードし、解凍して、マテリアルデザインのアイコンファイルを含むiconfontフォルダーをローカルプロジェクトにコピーします- ://github.com/google/material-design-icons/リリース

アーカイブのiconfontフォルダーのみを使用する必要があります。このフォルダーには、さまざまな形式のアイコンフォント（複数のブラウザーのサポート用）とボイラープレートのCSSが含まれています。

• @ font-faceのurl属性のソースを、ローカルプロジェクト（フォントファイルが配置されている場所）のiconfontフォルダーへの相対パスに置き換えます。url（ "iconfont / MaterialIcons-Regular.ttf"）

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

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

NPM / Bowerパッケージ

グーグルは正式にバウアーとNPMの依存オプションを持っています-マテリアルアイコンガイドに従ってください1

バウアーの使用：bower install material-design-icons --save

NPMの使用：npm install material-design-icons --save

マテリアルアイコン：または、@ marellaのhttps://marella.me/material-icons/から、マテリアルデザインアイコンのフォントとアイコンをホストするCSSフレームワークを調べます。

注意

グーグルは低メンテナンスモードのプロジェクトを持っているようです。最後のリリースは、執筆時点では3年前です！

これに関してGitHubにはいくつかの問題がありますが、私はIs this project actively maintained? #951、フォークされ、マテリアルアイコンを維持し続けているいくつかのコミュニティプロジェクトを参照している問題に関する@cyberalienコメントを参照したいと思います。

私はAngular 4/5向けにビルドしていて、オフラインで作業していることが多いので、以下がうまくいきました。最初にNPMをインストールします。

npm install material-design-icons --save

次に、styles.cssに以下を追加します。

@import '~material-design-icons/iconfont/material-icons.css';

上のアプローチは私にはうまくいきません。githubからファイルをダウンロードしましたが、ブラウザがフォントをロードしませんでした。

私がしたことは、素材アイコンのソースリンクを開くことでした：

https://fonts.googleapis.com/icon?family=Material+Icons

そして私はこのマークアップを見ました：

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.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;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

woffフォントのURLリンクを開くhttps://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

そして、woff2ファイルをダウンロードします。

次に、woff2ファイルパスをmaterial-icons.cssの新しいパスに置き換えます

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

これでうまくいきます。

webpackプロジェクトを使用する場合、後

npm install material-design-icons --save

あなたはただする必要があります

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

これは簡単な解決策かもしれません

元のリポジトリのフォークであるこのリポジトリを取得しますGoogleが公開し。

bowerまたはnpmでインストールします

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

HTMLページにcssファイルをインポートする

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

または

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

テスト：HTMLファイルのbodyタグ内にアイコンを追加します

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

顔アイコンが見えれば大丈夫です。

機能しない場合は、これ..をnode_modulesパスの接頭辞として追加してください：

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

私のレシピには3つのステップがあります。

1. material-design-iconsパッケージをインストールするには

   npm install material-design-icons

2. material-icons.cssファイルを.lessまたは.scssファイル/プロジェクトにインポートする

   @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

3. 推奨コードをreactjs .jsファイル/プロジェクトに含める

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>

material-design-icons-iconfontを使用する

完全な開示、私はこのパッケージの作者です

Googleの材料設計・アイコンのプロジェクトがあり、低メンテナンスに としばらくの間、日付のうち。https://material.io/icons/のバージョンと material-design-iconsのバージョンにはギャップがあり ます。

これらの主要な問題に対処するために、material-design-icons-iconfontを作成しました。

• 材料設計アイコンジャムnpm install -すべての無関係なSVG / XMLは、/ ...ファイルが削除されました
• フォントファイルは常に最新のものです Google Fonts CDN
• scssのサポート

経由でインストール npm

npm install material-design-icons-iconfont --save

Webアプリケーションのパック方法（webpack/ gulp/ bower/ ...）によって異なりますが、.css/ .scssファイルをインポートする必要があります（相対フォントパスが変更される場合があります）。

SCSSを使用したインポート

sassファイルの1つにインポートする

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

後で、目的のアイコン<i class="material-icons">+ icon-id +を参照します</i>

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

• その他のインポート方法については、material-design-icons-iconfontの完全な手順をお読みください

デモページ

フォントの検索とコピー貼り付けを支援する簡単なデモページが付属しています

私は自分の答えでセルフホスティングアイコンのために実行する必要があるすべてをコンパイルしようとしました。次の4つの簡単な手順に従う必要があります。

1. マテリアライズリポジトリのiconfontフォルダを開きます

   link- https://github.com/google/material-design-icons/tree/master/iconfont

2. これら3つのアイコンファイルをダウンロード->

   MaterialIcons-Regular.woff2 -format（ 'woff2'）

   MaterialIcons-Regular.woff -format（ 'woff'）

   MaterialIcons-Regular.ttf -format（ ' truetype '）;

   注-ダウンロード後は、好きな名前に変更できます。

3. 次に、CSSに移動してこのコードを追加します

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

注：src：url（...）で提供されるアドレスは、index.htmlファイルではなく、「CSSファイル」に関連している必要があります。たとえば、srcのようになります。url（../ myicons / MaterialIcons-Regular.woff2）

4. これで使用する準備ができました。HTMLでこれを行う方法

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

使用できるすべてのアイコンを表示するには、ここをクリックしてください。

完了したらnpm install material-design-icons、これをメインCSSファイルに追加します。

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

角張った

npm install angular-material-icons --save

または

npm install material-design-icons-iconfont --save

material-design-icons-iconfontは、アイコンの最新バージョンです。angular-material-iconsが長期間更新されない

インストールが完了するのを待って待って、それをangular.jsonに追加します->プロジェクト->アーキテクト->スタイル

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

または、material-desing-icons-iconfontをインストールした場合

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

2019年のアップデートはこちら：

マテリアルアイコンを自己ホストするには、通常のもの、丸みを帯びたもの、シャープなもの、すべてのバリエーション。このリポジトリから入手してください：https : //github.com/petergng/material-icon-font

どういうわけか、これらのフォントがGoogleリポジトリから簡単にアクセスできない理由がわかりません。

しかし、ここに行きます。

パッケージをダウンロードしたら、binフォルダーに移動すると、4つの亜種が表示されます。もちろん、どちらを使用するかはあなた次第です。

それらを使用するには、cssファイルを作成し、

1. 必要なバリアントごとにフォントフェイスを生成します。

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

urlアイコンは、プロジェクトに配置されている場所にリンクします。

2. 次に、アイコンクラスを登録します。

.material-icons-outlined, .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;
}

これにより、.material-icons-outlined, と .material-iconsクラスの両方 が同じデフォルトを使用するようになります。を使用したい場合は.material-icons-sharp、2つのクラス名に追加するだけです。

3. 最後に、ステップ1でプルしたフォントフェースをプラグインします。

.material-icons {
    font-family: 'Material Icons';
}

.material-icons-outlined {
    font-family: 'Material Icons Outline';
}

ここでも、Sharpのようなより多くのバリアントを使用するには、上記の2つのようにそのブロックを追加するだけです。

完了したら... htmlに移動して、新しく作成したアイコンを使用します。

<i class="material-icons-outlined">hourglass_empty</i>

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

上http://materialize.com/icons.htmlページに含めるスタイルヘッダ情報には、実際のハイパーリンクに移動し、ローカライズされたコピーはオフラインアイコンを使用することができます。

注：すべてのicon.cssとsomefile.woffの 2つのファイルをダウンロードします。

1. ヘッダーで必要に応じて次のURLに移動します

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 。

ページをwhatever_filename.cssとして保存します。デフォルトはicon.cssです。

2. このような行を探します

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. .woffで終わるURLにアクセスします

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2。ブラウザが自動的にダウンロードします。CSSフォルダーに保存します。

4. これで、2つのファイルicon.cssおよび2fcrYFNa .... mY.wof22が作成され、両方をcssに保存します。次に、cssヘッダーの場所で、ディレクトリのicon.cssを編集します。.woff2ファイルが常にicon.cssと同じフォルダーにあることを確認してください。長いファイル名を自由に編集してください。

質問のタイトルでは、マテリアルアイコンをオフラインでホストする方法を尋ねていますが、本文では、マテリアルアイコンをオフラインで使用することが目的であることが明確になっています（強調は私のものです）。。

マテリアルアイコンファイルの独自のコピーを使用することは、有効なアプローチ/実装です。もう1つは、Service Workerを使用できる人にとっては、Service Workerに処理を任せることです。そうすれば、コピーを入手して最新の状態に保つという煩わしさがありません。

たとえば、Workboxを使用してServiceWorkerを生成し、workbox-cliを実行してデフォルトを受け入れる最も簡単な方法を使用し、生成されたService Workerに次のテキストを追加します。

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

次に、F12>アプリケーション>ストレージ> IndexedDBを使用してChromeにキャッシュされたことを確認し、名前にgoogleapisが含まれるエントリを探します。

2020年現在、私のアプローチは、material-icons-fontパッケージを使用することです。Googleのmaterial-design-iconsパッケージとコミュニティベースのmaterial-design-icons-iconfontの使用を簡素化します。

1. パッケージをインストールします。 npm install material-icons-font --save

2. パッケージのCSSファイルのパスをプロジェクトのangular.jsonファイルのスタイルプロパティに追加します。

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. SCSSを使用している場合は、以下のコンテンツをstyles.scssファイルの先頭にコピーします。

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. プロジェクトのHTMLファイルのアイコンを使用します。

   // Using icon tag
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>

@ angular / materialのアイコンは、オフラインで開発すると壊れる傾向があります。material-icons-fontパッケージを@ angular / materialと組み合わせて追加すると、オフラインで開発中にタグを使用できます。

npmパッケージをインストールする

npm install material-design-icons --save

cssファイルのパスをstyles.cssファイルに入れます

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Kaloyan Stamatov法が最適です。まず、https：//fonts.googleapis.com/icon？family = Material + Iconsにアクセスします。そしてcssファイルをコピーします。内容はこんな感じ

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
.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;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

woff2ファイルダウンロードするには、ブラウザのフォントのソースを貼り付け https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2を 次に、元のソースにファイルを置き換えます。githubから60MBのファイルをダウンロードする必要がない場合は、名前を変更できます。シンプルな私のコードは次のようになります

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.woff2) format('woff2');
}

.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;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

一方、materialIcon.woff2は、ダウンロードおよび置換されたwoff2ファイルです。

npm install material-design-icons

そして

@import '~material-design-icons/iconfont/material-icons.css';

Angular Material 8で私のためにも働いた

これをWeb設定に追加すると、エラーは解消しました

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

ちなみにステップバイステップの説明とYouTubeで利用可能なビデオがあります。

https://youtu.be/7j6eOkhISzk

1. これらはステップです。マテリアライズアイコンパッケージをhttps://github.com/google/material-design-icons/releasesからダウンロードします

2. icon-fontフォルダーをコピーして、名前をiconsに変更します。

3. materialize.cssファイルを開き、次のパスを更新します。

a。url（MaterialIcons-Regular.eot）からurl（../ fonts / MaterialIcons-Regular.eot）へb。url（MaterialIcons-Regular.woff2）format（ 'woff2'）からurl（../ fonts / MaterialIcons-Regular.woff2）format（ 'woff2'）へc。url（MaterialIcons-Regular.woff）format（ 'woff'）からurl（../ fonts / MaterialIcons-Regular.woff）format（ 'woff'）へd。url（MaterialIcons-Regular.ttf）format（ 'truetype'）からurl（../ fonts / MaterialIcons-Regular.ttf）format（ 'truetype'）へ

3. materialize-icon.cssをcssフォルダーにコピーし、htmlファイルで参照します。

すべてが魔法のように動作します！