Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Font awesome Icon problem in latest update

Subrata Paul pro asked 5 years ago

Dear Support Team,

After install latest MDB version 7.4.2, having problem with fontawesome icons.

Presently I'm using fontawesome 4.7, because of that MDB Icons are not working, but when switching to fontawesome 5, my existing Icons are not working.

I've used these icons so many places ..

Please provide a better solution ..

Thanks,

Subrata Paul.

Damian Gemza staff answered 5 years ago

Dear junior,

Please remove the font-awesome library, and install the Font Awesome 5 library which is called @fortawesome/fontawesome-free, and then change the imports in angular.json file to below:

"styles": [
   "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
    "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
     "src/styles.scss"
            ],

Best Regards,

Damian

grupozarateusa@gmail.com free commented 5 years ago

I have the exact same problem after following each step on the posted solution. I can display all icons except the brand icons such as facebook, whatsapp, etc .. Is this a feature for paying members only? It worked fine for me prior to upgrading to font awesome 5! Thanks!

junior5417 pro answered 5 years ago

@Damian Gemza any solution on this?

junior5417 pro answered 5 years ago

Package.json 

 {
      "name": "mdb-angular-pro",
      "version": "6.0.2",
      "license": "MIT",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@agm/core": "^1.0.0-beta.2",
        "@angular/animations": "^6.0.0-rc.1",
        "@angular/cdk": "^6.3.2",
        "@angular/common": "^6.0.0-rc.1",
        "@angular/compiler": "^6.0.0-rc.1",
        "@angular/core": "^6.0.0-rc.1",
        "@angular/fire": "^5.0.0",
        "@angular/forms": "^6.0.0-rc.1",
        "@angular/http": "^6.0.0-rc.1",
        "@angular/material": "^6.3.2",
        "@angular/platform-browser": "^6.0.0-rc.1",
        "@angular/platform-browser-dynamic": "^6.0.0-rc.1",
        "@angular/router": "^6.0.0-rc.1",
        "@types/lodash": "^4.14.116",
        "chart.js": "2.5.x",
        "chartjs-funnel": "^1.0.5",
        "classlist.js": "1.1.x",
        "core-js": "2.4.x",
        "easy-pie-chart": "2.1.x",
        "firebase": "^5.4.2",
        "font-awesome": "4.7.x",
        "hammerjs": "2.0.x",
        "jarallax": "^1.10.3",
        "lodash": "^4.17.11",
        "moment": "^2.22.2",
        "ng-html-util": "1.0.x",
        "ng-uikit-pro-standard": "git+https://oauth2:MArKsJYomAy-Fxs5xe6G@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
        "ng2-fancy-image-uploader": "^2.0.1",
        "ngx-image-uploader": "^6.0.0-beta.1",
        "ngx-moment": "^3.1.0",
        "rxjs": "^6.0.0-rc.1",
        "rxjs-compat": "^6.0.0-rc.1",
        "screenfull": "3.3.x",
        "smoothscroll-polyfill": "0.3.x",
        "web-animations-js": "2.3.x",
        "zone.js": "0.8.x"
      },
      "devDependencies": {
        "@angular/cli": "^6.0.0-rc.1",
        "@angular/compiler-cli": "^6.0.0-rc.1",
        "@angular/language-service": "^6.0.0-rc.1",
        "@types/jasmine": "2.5.38",
        "@types/node": "~6.0.85",
        "codelyzer": "~3.2.0",
        "jasmine-core": "~2.5.2",
        "jasmine-spec-reporter": "~3.2.0",
        "karma": "~1.4.1",
        "karma-chrome-launcher": "~2.0.0",
        "karma-cli": "~1.0.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "protractor": "~5.1.2",
        "ts-node": "~3.2.0",
        "tslint": "~5.7.0",
        "typescript": "~2.7.2",
        "@angular-devkit/build-angular": "~0.5.0"
      }
    }

angular.json

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mdb-angular-pro": {
      "root": "",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/mdb-angular-pro",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [{
                "glob": "favicon.ico",
                "input": "src",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ],
            "styles": [{
                "input": "node_modules/font-awesome/scss/font-awesome.scss"
              },
              {
                "input": "scss/bootstrap/bootstrap.scss"
              },
              {
                "input": "scss/mdb.scss"
              },
              {
                "input": "src/styles.scss"
              }
            ],
            "scripts": [{
                "input": "node_modules/chart.js/dist/Chart.js"
              },
              {
                "input": "node_modules/easy-pie-chart/dist/easypiechart.js"
              },
              {
                "input": "node_modules/screenfull/dist/screenfull.js"
              },
              {
                "input": "node_modules/hammerjs/hammer.min.js"
              }
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mdb-angular-pro:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "mdb-angular-pro:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mdb-angular-pro:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [{
              "input": "styles.scss"
            }],
            "scripts": [],
            "assets": [{
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "mdb-angular-pro-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "mdb-angular-pro:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }
}

Everything was working fine before update to latest version. I updated my MDB thru npm install

Damian Gemza staff answered 5 years ago

Dear junior,

Could you please show me the code of your package.json and angular.json files? I would like to see, if you have imported the icons styles correctly.

Best Regards,

Damian

junior5417 pro answered 5 years ago 

<div>
          <mdb-icon fab icon="facebook-f"></mdb-icon>
          <span class="ml-3 link-href">Facebook</span>
 </div>

I copied and implemented this directly from the icon list. I'm still getting the errors loading the icon thou...

Damian Gemza staff answered 5 years ago

Hi guys,

Could you please provide me with the code which you're using? With the update to FA5, you have to change the code of the mdb-icon component.

Now there's necessary to use the icon directives: fas, far, fab.

Without your code, I won't be able to help you well.

Best Regards, Damian

junior5417 pro answered 5 years ago

I'm Getting same errors as well enter image description here

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.2
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
icon-poblem
About author
Subrata Paul
Pro User 121Support score
11Questions 6Answers 0Snippets