想做的事情

我想要在离线状态下使用大家都喜欢的材料图标。

常规使用CDN的方式

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

绊倒的地方

参考了这个链接 http://heimdal.hatenablog.com/entry/how-to-use-material-Icons ，试着将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' */

参考stackoverflow.com/questions/37270835/how-to-host-material-icons-offline的方法也不起作用，我尝试将material-design-icons安装到node_modules并且使用import语句进行导入，但没有成功。我使用npm install material-design-icons –save进行安装。

@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文件就可以了。

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

版本

{
  "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"
  }
}