title: Custom font from node_modules into angular-cli
body: <p>I have looked at several stackoverflow posts and github issues, but can't find something that is working for me.</p>
  
  <p>I have a custom font that I'm using for icons that I'm installing via npm. These are the files in my folder <code>a-icons</code> in <code>node_modules</code>:</p>
  
  <pre><code>a-icon.css
  a-icon.eot,
  a-icon.ttf,
  a-icon.woff,
  a-icon.svg
  </code></pre>
  
  <p>In my main stylesheet I've added:</p>
  
  <pre><code>@import '~a-icons/a-icon';
  @font-face {
    font-family: 'a-icon';
    src: url('../../../node_modules/a-icons/a-icon.eot');
    src:
      url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
      url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
      url('../../../node_modules/a-icons/a-icon.svg') format('svg');
  }
  </code></pre>
  
  <p><code>@import '~a-icons/a-icon'</code> is specifically giving me an error saying that it can't find the .eot, .ttf, .woff, .svg </p>
  
  <p>This is one of the errors:</p>
  
  <pre><code>ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss
  Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
  resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
    using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
      Field 'browser' doesn't contain a valid alias configuration
    after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
      using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
        as directory
          /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
  [/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
  [/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
  [/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
  [/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
   @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss 6:76081-76109
   @ ./src/assets/stylesheets/global-styles.scss
   @ multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css
  </code></pre>
  
  <p>I'm using scss, but the font is in vanilla css.</p>
  
  <p>I've also tried <code>@import '../../../node_modules/a-icons/a-icon.css';</code> The icons show up as a square and I think that's because the font-family isn't recognized. So I added @font-face, but that it doesn't do anything.</p>
  
  <p>I also tried changing angular-cli.json to include it in the assets and style:</p>
  
  <pre><code>"assets": [
      "assets",
      "assets/languages",
      "assets/stylesheets",
      "favicon.ico",
      "environments/environment.values.js",
      {
        "glob": "a-icon.*",
        "input": "../node_modules/a-icons",
        "output": "./assets/a-icons"
      }
  "styles": [
      "assets/stylesheets/global-styles.scss",
      "../node_modules/normalize.css/normalize.css",
      "../node_modules/a-icons/a-icon.css"
      ]
  </code></pre>
  
  <p>This doesn't do anything.</p>