CODEWITHSUNDEEP
jhipster
Nico
Nico

Reputation: 505

How to display icons in JHipster 5?

I'm trying to add/change Font Awesome icon in JHipster 5 app. I can print only icons that already in default template.

I can change:

   <fa-icon [icon]="'home'"></fa-icon>
            <span>
                <span jhiTranslate="global.menu.home">Home</span>
            </span>

to:

<fa-icon [icon]="'asterisk'"></fa-icon>
                <span>
                    <span jhiTranslate="global.menu.home">Home</span>
                </span>

but can't change to 

<fa-icon [icon]="'tv'"></fa-icon>
                <span>
                    <span jhiTranslate="global.menu.home">Home</span>
                </span>

or any other icon. Are they defined in some place?

Upvotes: 4

Views: 7298

Answers (5)

Olivier Royo
Olivier Royo

Reputation: 840

For jhipster version 7, file to modify is now located at : src/main/webapp/app/config/icon-loader.ts

Upvotes: 0

Duc Le
Duc Le

Reputation: 51

For Jhipster 6 the file to define icons to be used is src/main/webapp/app/core/icons/font-awesome-icons.ts:

import { faAmazon } from '@fortawesome/free-brands-svg-icons';
export const fontAwesomeIcons = [
    faAmazon,
    faUser,
    ...

and remember to refer to the icon with (note 'fab' instead of 'fa' for brands icons):

<fa-icon [icon]="['fab', 'amazon']"></fa-icon>

If you plan to include brands free icons (amazon icon is there) you should also install the npm package:

npm install --save @fortawesome/free-brands-svg-icons

Upvotes: 4

Anthony
Anthony

Reputation: 189

If you tried to add your icons like so:

vendor.ts

import {
    // other imports
    faFileSignature,
    faLock
} from '@fortawesome/free-solid-svg-icons';

// other imports
library.add(faFileSignature);
library.add(faLock);

but it didn't work and you get an error telling you that global styles are deprecated, I fixed it like this.

I created a new icon.module.ts and imported it in the shared-libs.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from "@fortawesome/free-solid-svg-icons";


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FontAwesomeModule
  ]
})
export class IconsModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas);
  }
}

I hope I helped.

Upvotes: 0

Vincent KERDRAON
Vincent KERDRAON

Reputation: 193

To complete Alexandre answer ;

Example to add the twitter icon :

(in "jhipsterVersion": "5.1.0")

read node_modules/@fortawesome/angular-fontawesome/README.md

  1. yarn add @fortawesome/free-brands-svg-icons in src/main/webapp/app/vendor.ts

  2. declare your icon :

.

import { faTwitter } from '@fortawesome/free-brands-svg-icons';
library.add(faTwitter);
  1. in your html, use and don't forget to tell it is from fab (Brand)

.

<fa-icon [icon]="['fab', 'twitter']"></fa-icon>
  1. Maybe you should also re-run webpack:build. But for me it worked directly

(see the top of of src/main/webapp/app/vendor.ts)

/* after changing this file run 'yarn run webpack:build' */

Upvotes: 4

Alexandre GC
Alexandre GC

Reputation: 563

Icons are in src/main/webapp/app/vendor.ts, here you can add new icons.

Upvotes: 16

Related Questions