title: Bootstrap 4 Glyphicons not showing on Angular 4 project
body: <p>I'm working on an Angular 4 Project using Bootstrap 4 with Sass, and I want to use the glyphicons but when I use the following code:</p>
  
  <pre><code>&lt;button class="btn btn-sm btn-primary"&gt;&lt;span class="glyphicon glyphicon-thumbs-up"&gt;&lt;/span&gt;Like&lt;/button&gt;
  </code></pre>
  
  <p>For example, when making a "like" button, the icon doesn't show.</p>
  
  <p>I configured the project to compile the SCSS stylesheets with the <code>ng-serve</code> command, my <code>angular-cli.json</code> looks like this:</p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "front-end-informatorio"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "../node_modules/bootstrap/scss/bootstrap.scss",
          "../node_modules/bootstrap/scss/main.scss"
  
        ],
        "scripts": [],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "project": "src/tsconfig.app.json",
        "exclude": "**/node_modules/**"
      },
      {
        "project": "src/tsconfig.spec.json",
        "exclude": "**/node_modules/**"
      },
      {
        "project": "e2e/tsconfig.e2e.json",
        "exclude": "**/node_modules/**"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "scss",
      "component": {}
    }
  }
  </code></pre>
  
  <p>I tried linking this in my <code>index.html</code>:</p>
  
  <pre><code>&lt;link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"/&gt;
  </code></pre>
  
  <p>It made the icons work, but also also changed the whole style of my project.</p>
  
  <p>How do I achieve it without overlapping the styles?</p>