emoji-mart: Image size is too large

This is how the user can click on a button to see a list of emojis:

<button mat-icon-button type="button" aria-label="Add emoji" (click)="toggleEmojiPicker()">
<mat-icon>mood</mat-icon>
</button>

<div *ngIf="isEmojiPickerVisible" class="emoji-picker">
<emoji-mart class="emoji-mart" [set]="'twitter'" [title]="'Pick an emoji'" (emojiClick)="addEmoji($event)">
</emoji-mart>
</div>


import { Component } from '@angular/core';
import {ReactiveFormsModule} from "@angular/forms";
import {MatIconButton} from "@angular/material/button";
import {NgIf} from "@angular/common";
import {MatIcon} from "@angular/material/icon";
import {PickerModule} from "@ctrl/ngx-emoji-mart";

@Component({
selector: 'app-comments',
standalone: true,
imports: [
ReactiveFormsModule,
NgIf,
PickerModule,
MatIconButton,
MatIcon
],
templateUrl: './comments.component.html',
styleUrl: './comments.component.sass'
})
export class CommentsComponent {
isEmojiPickerVisible = false;

toggleEmojiPicker() {
this.isEmojiPickerVisible = !this.isEmojiPickerVisible;
}
}


Also, the array styles from angular.json contains the value node_modules/@ctrl/ngx-emoji-mart/picker.css.

My problem is, when the button has been clicked, the browser tries to download the following file: https://cdn.jsdelivr.net/npm/emoji-datasource-twitter@14.0.0/img/twitter/sheets-256/64.png



As you see in the screenshot, it takes about 5 seconds to load. I also tried it with google, apple etc. but their file size is not much smaller than this.

On Stackblitz of this example, it is much faster, because their image is smaller.

To compare, this their image: https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png

And this my image: https://cdn.jsdelivr.net/npm/emoji-datasource-twitter@14.0.0/img/twitter/sheets-256/64.png

The version of ngx-emoji-mart I use is 9.2.0.

How can I make it faster? Can I make it use the image from https://unpkg.com instead?

Continue reading...