How to import icons?

[eff-vbov]

I am trying for the first time Clarity and I am following the code listed here for creating a page layout: https://clarity.design/documentation/app-layout/code

The app build and load, however the icons are not displayed in header bar, there are instead 3 dots loading animation.

I am using a brand new Angular project:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@cds/core": "^6.15.1",
    "@clr/angular": "^17.5.0",
    "@clr/ui": "^17.5.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.11",
    "@angular/cli": "^17.3.11",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }

This is my AppModule:

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ClarityModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

And this is how I imported the Clarity styles into my styles.scss by following your documentation:

/* You can add global styles to this file, and also import other style files */
@import '@cds/core/global.min.css';
@import '@cds/core/styles/theme.dark.min.css';
@import '@clr/ui/clr-ui.min.css';

What am I doing wrong? Is importing the ClarityModule in Angular not enough?

Thank you :)

[kevinbuhmann]

You need to register the icons you use. Please see the [https://clarity.design/documentation/icons](icons documentation)

[eff-vbov]

Thank you Kevin for helping me :)

Yes I saw the icon section of the documentation, but I was in doubt on where to register the call correctly in Angular, I was expecting somehow an IconModule to register that would make every icon available (Something like font-awesome css).

I registered just 2 icons for testing in the main AppModule of Angular, is the right location to do so?:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from '@clr/angular';
import { AppComponent } from './app.component';

import '@cds/core/icon/register.js';
import { ClarityIcons, vmBugIcon, cloudIcon } from '@cds/core/icon';
ClarityIcons.addIcons(vmBugIcon, cloudIcon);

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ClarityModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

What I am now confused about is the output:

The vmware logo and the cloud are now showing, however, also the CircleInfo icon in the alert panel is showing, and I didn't have to register it myself. How come? Is there a way to register all the icons automatically and make them available in Angular? (I am pretty sure that developers in our company don't want to double check the HTML code to see what icons the application use).

[kevinbuhmann]

I registered just 2 icons for testing in the main AppModule of Angular, is the right location to do so?:

Yes, that will work, but I would recommend moving the ClarityIcons.addIcons() calls to the components that use the icon. That way, if a component is not imported in a bundle, its icons won't be included in that bundle either.

however, also the CircleInfo icon in the alert panel is showing, and I didn't have to register it myself. How come?

The alert component registers the icons it uses.

Is there a way to register all the icons automatically and make them available in Angular? (I am pretty sure that developers in our company don't want to double check the HTML code to see what icons the application use).

You technically can, but it is not recommended (and not documented). Doing so will bloat you application bundles.