Customize Meeting Icons

RealtimeKit's UI Kit provides all the necessary UI components to allow complete customization of all its UI Kit components. You can customize your meeting icons such as chat, clock, leave meeting, mic on and off, and more.

Customizing the meeting icons involve the following steps:

1. Integrate RealtimeKit's web SDK into your web application
2. Customize the default icon pack

Step 1: Integrate RealtimeKit's web SDK into your web application

To get started with customizing the icons for your meetings, you need to first integrate RealtimeKit's Web SDK into your web application.

1. Install the package using npm or Yarn.

npm

npm install @cloudflare/realtimekit-angular-ui @cloudflare/realtimekit

Yarn

yarn add @cloudflare/realtimekit-angular-ui @cloudflare/realtimekit

pnpm

pnpm add @cloudflare/realtimekit-angular-ui @cloudflare/realtimekit

2. Create a meeting room using the Create Meeting API.
3. Generate an authToken using the Add Participant API. An authToken is a unique token that is used to identify a user in the meeting.
4. Initialize the RealtimeKit client using the RealtimeKitClient.init({ authToken }). It returns the meeting object.
5. Pass the meeting object to the UI Kit.

The rtk-meeting component generates the default UI experience. Read more about how to customize the UI here.

class AppComponent {
  title = 'MyProject';
  @ViewChild('myid') meetingComponent: RtkMeeting;
  rtkMeeting: RealtimeKitClient;

  async ngAfterViewInit() {
    const meeting = await RealtimeKitClient.init({
      authToken: '<auth-token>',
    });
    meeting.join();
    this.rtkMeeting = meeting;
    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
  }
}

Step 2: Customize default icon pack

Now that you've integrated RealtimeKit SDK into your application successfully, let's quickly understand how you can customize the icon set for your application.

RealtimeKit's default icon set is available at icons.dyte.io. You can modify and generate your custom icon set from here.

In order to replace RealtimeKit's default icon set with your own, you can pass the link to your icon set in the rtk-meeting component like so.

class AppComponent {
  title = 'MyProject';
  @ViewChild('myid') meetingComponent: RtkMeeting;
  rtkMeeting: RealtimeKitClient;

  async ngAfterViewInit() {
    const meeting = await RealtimeKitClient.init({
      authToken: '<auth-token>',
    });
    meeting.join();
    this.rtkMeeting = meeting;
    if (!this.meetingComponent) {
      throw Error('Component is empty');
    }
    this.meetingComponent.meeting = meeting;

    // Pass the icon pack url
    this.meetingComponent.iconPackUrl = 'https://example.com/my-icon-pack.json';
  }
}

IconPack Reference

Ƭ IconPack: typeof defaultIconPack

Icon Pack object type:

• Object key denotes name of icon
• Object value stores the SVG string

defaultIconPack

• Const defaultIconPack: Object

Type declaration

Name	Type
attach	string
call_end	string
chat	string
checkmark	string
chevron_down	string
chevron_left	string
chevron_right	string
chevron_up	string
clock	string
copy	string
disconnected	string
dismiss	string
download	string
emoji_multiple	string
full_screen_maximize	string
full_screen_minimize	string
image	string
image_off	string
join_stage	string
leave_stage	string
mic_off	string
mic_on	string
more_vertical	string
participants	string
people	string
pin	string
pin_off	string
poll	string
recording	string
rocket	string
search	string
send	string
settings	string
share	string
share_screen_person	string
share_screen_start	string
share_screen_stop	string
speaker	string
spinner	string
spotlight	string
stop_recording	string
subtract	string
vertical_scroll	string
vertical_scroll_disabled	string
video_off	string
video_on	string
wand	string
warning	string
wifi	string