feat(icon): add support for ligature icons (#2951)

docs/articles/guides/custom-icons.md

@@ -10,11 +10,12 @@ In case you need to have more icons available, Nebular provides a `@nebular/eva-
 
 Install the pack:
 
- ```sh
- npm i eva-icons @nebular/eva-icons
- ```
+```sh
+npm i eva-icons @nebular/eva-icons
+```
 
 This command will install Eva Icons pack. Then register `NbEvaIconsModule` into your app module:
+
 ```ts
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 
@@ -24,9 +25,11 @@ import { NbEvaIconsModule } from '@nebular/eva-icons';
     NbEvaIconsModule,
   ],
 })
-export class AppModule { }  
+export class AppModule {}
 ```
+
 Import `NbIconModule` into your feature module where you need to show the icon:
+
 ```ts
 import { NbIconModule } from '@nebular/theme';
 
@@ -36,7 +39,7 @@ import { NbIconModule } from '@nebular/theme';
     NbIconModule,
   ],
 })
-export class PageModule { }
+export class PageModule {}
 ```
 
 Importing `NbEvaIconsModule` also sets the Eva pack as the default pack, which means you can render a Eva icon without specifying the pack implicitly:
@@ -66,8 +69,8 @@ Then simply register the pack using `NbIconLibraries` service in you `app.compon
 <nb-icon icon="star" pack="font-awesome"></nb-icon>
 ```
 
-
 Lastly, we can set this pack as the default and not specify it implicitly while using `<nb-icon>`:
+
 ```ts
   import { NbIconLibraries } from '@nebular/theme';
 
@@ -83,6 +86,16 @@ Now we can use `font-awesome` icons without specifying the pack:
 <nb-icon icon="star"></nb-icon>
 ```
 
+### Ligature font pack
+
+`registerFontPack` supports fonts with ligatures. To register ligature font pack add `ligature: true` property to the configuration parameter:
+
+```ts
+this.iconLibraries.registerFontPack('material-icons', {
+  ligature: true,
+});
+```
+
 ## 3rd-party/Custom SVG Pack
 
 If the icons are provided as SVG elements, you can register the pack as follows:
@@ -104,7 +117,7 @@ And then use it as any other icon:
 
 ```html
 <nb-icon icon="facebook" pack="social-networks"></nb-icon>
-``` 
+```
 
 ## Related Articles
 

src/framework/theme/components/icon/icon-libraries.ts

@@ -30,9 +30,8 @@ function throwWrongPackTypeError(name: string, type: string, desiredType: string
 /**
  * This service allows to register multiple icon packs to use them later within `<nb-icon></nb-icon>` component.
  */
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
 export class NbIconLibraries {
-
   protected packs: Map<string, NbIconPack> = new Map();
   protected defaultPack: NbIconPack;
 
@@ -42,7 +41,7 @@ export class NbIconLibraries {
    * @param {NbIcon} icons
    * @param {NbIconPackParams} params
    */
-  registerSvgPack(name: string, icons: NbIcons, params: NbIconPackParams= {}) {
+  registerSvgPack(name: string, icons: NbIcons, params: NbIconPackParams = {}) {
     this.packs.set(name, {
       name,
       icons: new Map(Object.entries(icons)),
@@ -127,13 +126,14 @@ export class NbIconLibraries {
       throwWrongPackTypeError(iconsPack.name, iconsPack.type, 'Font');
     }
 
-    const icon = this.getIconFromPack(name, iconsPack);
+    const icon = this.getIconFromPack(name, iconsPack) ?? '';
+    const iconContent = iconsPack.params.ligature ? name : icon;
 
     return {
       name,
       pack: iconsPack.name,
       type: NbIconPackType.FONT,
-      icon: this.createFontIcon(name, icon ? icon : '', iconsPack.params),
+      icon: this.createFontIcon(name, iconContent, iconsPack.params),
     };
   }
 
@@ -163,7 +163,6 @@ export class NbIconLibraries {
   }
 
   protected getPackOrThrow(name: string): NbIconPack {
-
     const pack: NbIconPack = this.packs.get(name);
     if (!pack) {
       throwPackNotFoundError(name);
@@ -172,7 +171,6 @@ export class NbIconLibraries {
   }
 
   protected getDefaultPackOrThrow(): NbIconPack {
-
     if (!this.defaultPack) {
       throwNoDefaultPackError();
     }

src/framework/theme/components/icon/icons-libraries.spec.ts

@@ -108,6 +108,19 @@ describe('icons-library', () => {
     expect(icon.type).toEqual('font');
   });
 
+  it('should return ligature icon', () => {
+    iconsLibrary.registerFontPack('font-pack', { ligature: true, packClass: 'font', iconClassPrefix: 'fp' });
+    iconsLibrary.setDefaultPack('font-pack');
+
+    const icon = iconsLibrary.getFontIcon('home');
+
+    expect(icon.icon.getContent()).toEqual('home');
+    expect(icon.icon.getClasses()).toEqual(['font', 'fp-home']);
+    expect(icon.name).toEqual('home');
+    expect(icon.pack).toEqual('font-pack');
+    expect(icon.type).toEqual('font');
+  });
+
   it('should return icon', () => {
     iconsLibrary.registerSvgPack('super-pack', { home: '<svg><rect></rect></svg>', gear: '<svg></svg>' });
     iconsLibrary.registerFontPack('font-pack', { packClass: 'font', iconClassPrefix: 'fp' });