Angular - IBM Carbon icons not showing

Question

I am using the Angular implementation of the IBM Carbon Design and IBM icons are not showing in some contexts.

What i'm supposed to get :

What i get :

Icons which appear in my header :

Here is my Angular config :

Here are the files where icons appear (header) :

app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// IBM Carbon Modules
import Notification20Icon from '@carbon/icons/es/notification/20';
import Switcher20Icon from '@carbon/icons/es/switcher/20';
import UserAvatar20Icon from '@carbon/icons/es/user--avatar/20';
import {
  BreadcrumbModule, ButtonModule, GridModule,
  IconModule, IconService, ListModule, TableModule,
  TabsModule, TilesModule, UIShellModule
} from 'carbon-components-angular';
// App Modules
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './Components/header/header.component';
import { LandingComponent } from './Components/landing/landing.component';
import { ReposComponent } from './Components/repos/repos.component';
import { InfoModule } from './module/info/info.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    LandingComponent,
    ReposComponent,
  ],
  imports: [
    BrowserModule,
    ButtonModule,
    AppRoutingModule,
    CommonModule,
        GridModule,
        ListModule,
        TabsModule,
    TilesModule,
        BrowserAnimationsModule,
        FormsModule,
        AppRoutingModule,
        UIShellModule,
    IconModule,
    BreadcrumbModule,
    TableModule,
    InfoModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
  constructor(protected iconService: IconService) {
        iconService.registerAll([
            Notification20Icon,
            UserAvatar20Icon,
      Switcher20Icon,
        ]);
    }
 }

header.component.html

<ibm-header name="[PW - Raceway]">
  <ibm-header-navigation>
    <ibm-header-item routerLink="landing">Landing</ibm-header-item>
    <ibm-header-item routerLink="repos">Repositories</ibm-header-item>
    <ibm-header-item routerLink="support">Support</ibm-header-item>
    <ibm-header-menu title="Manage">
      <ibm-header-item routerLink="link1">Link 1</ibm-header-item>
      <ibm-header-item>Link 2</ibm-header-item>
      <ibm-header-item>Link 3</ibm-header-item>
    </ibm-header-menu>
  </ibm-header-navigation>
  <ibm-header-global>
    <ibm-header-action title="action">
      <svg ibmIcon="notification" size="20"></svg>
    </ibm-header-action>
    <ibm-header-action title="action">
      <svg ibmIcon="user--avatar" size="20"></svg>
    </ibm-header-action>
    <ibm-header-action title="action">
      <svg ibmIcon="switcher" size="20"></svg>
    </ibm-header-action>
  </ibm-header-global>
</ibm-header>

Here are the files where icons don't appear (kind of footer) :

info.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
// IBM Carbon Modules
import Application32Icon from '@carbon/icons/es/application/32';
import Globe32Icon from '@carbon/icons/es/globe/32';
import PersonFavorite32Icon from '@carbon/icons/es/person--favorite/32';
import { GridModule, IconService } from 'carbon-components-angular';
// App Modules
import { CardComponent } from './card/card.component';
import { SectionComponent } from './section/section.component';

@NgModule({
  declarations: [
    CardComponent,
    SectionComponent
  ],
  imports: [
    CommonModule,
    GridModule,
  ],
  providers: [],
  exports: [
    SectionComponent,
    CardComponent
  ]
})
export class InfoModule {

  constructor(protected iconService: IconService) {
        iconService.registerAll([
      Application32Icon,
            Globe32Icon,
            PersonFavorite32Icon,
        ]);
    }
 }

section.component.html

<section ibmRow class="info-section info-section__r1">
  <div ibmCol [columnNumbers]="{'md': 4, 'lg': 4}">
    <h3 class="info-section__heading">{{heading}}</h3>
  </div>
  <app-card
    ibmCol
    [columnNumbers]="{'md': 4, 'lg': 4}"
    [heading]="items[0].heading"
    [content]="items[0].content"
  >
    <svg ibmIcon="person--favorite" size="32"></svg>
  </app-card>
  <app-card
    ibmCol
    [columnNumbers]="{'md': 4, 'lg': 4}"
    [heading]="items[1].heading"
    [content]="items[1].content"
  >
    <svg ibmIcon="application" size="32"></svg>
  </app-card>
  <app-card
    ibmCol
    [columnNumbers]="{'md': 4, 'lg': 4}"
    [heading]="items[2].heading"
    [content]="items[2].content"
  >
    <svg ibmIcon="globe" size="32"></svg>
  </app-card>
</section>

card.component.html

<div class="info-card">
  <h4 class="info-card__heading">
    {{splitHeading[0]}}
    <strong>{{splitHeading[1]}}</strong>
  </h4>
  <div class="info-card__body">{{content}}</div>
  <div class="info-card__icon">
    <ng-content></ng-content>
  </div>
</div>

How can i solve that ? I don't get any error be it in VS Code or in the browser.

Answer 1

The problem was that I wasn't importing the IconModule in my info.module.ts so obviously it couldn't load the icons.

The corrected file :

info.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
// IBM Carbon Modules
import Application32Icon from '@carbon/icons/es/application/32';
import Globe32Icon from '@carbon/icons/es/globe/32';
import PersonFavorite32Icon from '@carbon/icons/es/person--favorite/32';
import { GridModule, IconModule, IconService } from 'carbon-components-angular';
// App Modules
import { CardComponent } from './card/card.component';
import { SectionComponent } from './section/section.component';

@NgModule({
  declarations: [
    CardComponent,
    SectionComponent
  ],
  imports: [
    CommonModule,
    GridModule,
    IconModule
  ],
  providers: [],
  exports: [
    SectionComponent,
    CardComponent
  ]
})
export class InfoModule {

  constructor(protected iconService: IconService) {
        iconService.registerAll([
      Application32Icon,
            Globe32Icon,
            PersonFavorite32Icon,
        ]);
    }
 }