AngularでMaterial Iconsをオフラインで使う方法

14383 ワード
Angular2 material-ui Angular2 テキストリンク

やりたいこと

みんな大好きMaterial Iconsをオフラインで使いたい。

<参考>CDNを使った通常の使い方

styles.css
@import "https://fonts.googleapis.com/icon?family=Material+Icons"

つまづいたところ

http://heimdal.hatenablog.com/entry/how-to-use-material-Icons
を参考にローカルにcssを置いてみたが、だめ。

styles.css
@import "./material-icons.css";
/* WARNING in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
(Emitted value instead of an instance of Error) postcss-url: C:\Users\hoge\Documents\shumi\src\material-icons.css:5:3: Can't read file 'C:\Users\hoge\Documents\shumi\shumi\src\MaterialIcons-Regular.eot', ignoring
NonErrorEmittedError: (Emitted value instead of an instance of Error) postcss-url: C:\Users\hoge\Documents\shumi\src\material-icons.css:5:3: Can't read file 'C:\Users\hoge\Documents\shumi\src\MaterialIcons-Regular.eot' */

https://stackoverflow.com/questions/37270835/how-to-host-material-icons-offline
を参考にnode_modulesにmaterial-design-iconsをinstallしてimportしてもだめ。
npm install material-design-icons --save

styles.css
@import '~material-design-icons/iconfont/material-icons.css';
/* ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
Module build failed: Error: Can't resolve '~material-design-icons/iconfont/material-icons.css' in 'C:\Users\hoge\Documents\shumi\shumi\src' */

これでできた

CDN先にアクセスすると、下記が表示された。

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v34/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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

srcのurlから.woff2ファイルを手に入れて適当（今回はmaterial.woff2）にリネームの後、styles.cssに記載したらOKだった。

styles.css
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./material.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;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

バージョン

package.json
{
  "name": "shumi",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/router": "^5.1.0",
    "core-js": "^2.4.1",
    "material-design-icons": "^3.0.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.4",
    "@angular/compiler-cli": "^5.1.0",
    "@angular/language-service": "^5.1.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}
hibernateクエリーテーブルのすべてのレコード、レコードをページに表示
PHP内部の通知メカニズムを実現し、一つのクラスの属性が変化した場合、もう一つのクラスは通知を受け取ることができる.