Skip to main content

Customize Meeting Icons

Dyte'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 Dyte's web SDK into your web application
  2. Customize the default icon pack

Step 1: Integrate Dyte's web SDK into your web application​

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

  1. Install the package using npm or Yarn.

To set up UI Kit components and web-core, add the following script tags inside the <head /> tag.

<head>
  <script type="module">
      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit/loader/index.es2017.js';
      defineCustomElements();
  </script>
  <!-- Import Web Core via CDN too -->
  <script src="https://cdn.dyte.in/core/dyte.js"></script>
</head>

You can also import utilities or any other export from CDN:

<head>
  <script type="module">
    import {
      provideDyteDesignSystem, extendConfig,
    } from 'https://cdn.jsdelivr.net/npm/@dytesdk/ui-kit/dist/esm/index.js';
  </script>
</head>
  1. Create a meeting room using the Create Meeting API.
  2. Generate an authToken using the Add Participant API. An authToken is a unique token that is used to identify a user in the meeting.
  3. Initialize the Dyte client using the DyteClient.init({ authToken }). It returns the meeting object.
  4. Pass the meeting object to the UI Kit.

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

<body>
  <dyte-meeting id="my-meeting"></dyte-meeting>

  <script>
    const init = async () => {
      const meeting = await DyteClient.init({
        authToken: '',
        defaults: {
          audio: true,
          video: true,
        },
      });
      const meetingEl = document.getElementById('my-meeting');
      meetingEl.meeting = meeting;
    };

    init();
  </script>
</body>

Step 2: Customize default icon pack​

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

Dyte'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 Dyte's default icon set with your own, you can pass the link to your icon set in the dyte-meeting component like so.

<body>
  <dyte-meeting id="my-meeting"></dyte-meeting>

  <script>
    const init = async () => {
      const meeting = await DyteClient.init({
        authToken: '',
        defaults: {
          audio: true,
          video: true,
        },
      });
      const meetingEl = document.getElementById('my-meeting');
      meetingEl.meeting = meeting;

      // Pass custom icon pack url
      meetingEl.iconPackUrl = 'https://example.com/my-icon-pack.json';
    };

    init();
  </script>
</body>

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​

NameType
attachstring
call_endstring
chatstring
checkmarkstring
chevron_downstring
chevron_leftstring
chevron_rightstring
chevron_upstring
clockstring
copystring
disconnectedstring
dismissstring
downloadstring
emoji_multiplestring
full_screen_maximizestring
full_screen_minimizestring
imagestring
image_offstring
join_stagestring
leave_stagestring
mic_offstring
mic_onstring
more_verticalstring
participantsstring
peoplestring
pinstring
pin_offstring
pollstring
recordingstring
rocketstring
searchstring
sendstring
settingsstring
sharestring
share_screen_personstring
share_screen_startstring
share_screen_stopstring
speakerstring
spinnerstring
spotlightstring
stop_recordingstring
subtractstring
vertical_scrollstring
vertical_scroll_disabledstring
video_offstring
video_onstring
wandstring
warningstring
wifistring