Custom Icons

Replace the widget's built-in icons with your own, via the icons property on <saytv-chat>. It takes a map of icon name → replacement, where each replacement is either an inline SVG string or an image URL. Overrides are opt-in and partial — override just the icons you care about and the rest keep their defaults.

Quick start

<saytv-chat app-id="your-app-id"></saytv-chat>

<script>
  const chat = document.querySelector('saytv-chat');
  chat.icons = {
    // Inline SVG (recolorable — see guidelines)
    send: '<svg viewBox="0 0 24 24"><path d="M3 11l18-8-8 18-2-8-8-2z" fill="currentColor"/></svg>',
    // Or an image URL / data: URI
    chat: 'https://cdn.example.com/icons/chat.svg',
  };
</script>

You can set icons before the widget script loads — the value is applied once the element upgrades, so there's no need to wait for a ready event.

Overridable icon names

Name	Where it appears
back	Header back button
search	Header search action
users	Header "members" action
send	Message composer send button
emoji	Message composer emoji button
chat	Bottom tab bar — Chat
friends	Bottom tab bar — Friends
fanzone	Bottom tab bar — Fanzone
profile	Bottom tab bar — Profile
close	Modal / dialog close buttons

Passing a name that isn't in this list is ignored (the built-in icon is used).

Value formats

Inline SVG (recommended)

An <svg>…</svg> string is injected inline and recolored to match its context — the header icon color, the active tab color, etc. To get that recoloring, use currentColor for strokes/fills:

chat.icons = {
  profile: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/></svg>',
};

Image URL or data: URI

A value starting with http://, https://, data:, or / renders as an <img> at the icon's size. Images are not recolored, so provide a color that works on both header (colored) and footer (light) backgrounds, or supply different assets:

chat.icons = {
  chat: 'https://cdn.example.com/icons/chat.svg',
  friends: 'data:image/svg+xml;base64,PHN2Zy4uLg==',
};

React

import { SayTVChat } from '@saytv/chat-react';

const icons = {
  send: '<svg viewBox="0 0 24 24"><path d="M3 11l18-8-8 18-2-8-8-2z" fill="currentColor"/></svg>',
  chat: 'https://cdn.example.com/icons/chat.svg',
};

export function Chat() {
  return <SayTVChat appId="your-app-id" icons={icons} />;
}

Define the icons object outside the component (or memoize it) so it isn't recreated on every render.

Vue

<script setup>
import { SayTVChat } from '@saytv/chat-vue';

const icons = {
  send: '<svg viewBox="0 0 24 24"><path d="M3 11l18-8-8 18-2-8-8-2z" fill="currentColor"/></svg>',
  chat: 'https://cdn.example.com/icons/chat.svg',
};
</script>

<template>
  <SayTVChat app-id="your-app-id" :icons="icons" />
</template>

Guidelines

• Use a 0 0 24 24 viewBox. Built-in icons are drawn on a 24×24 grid; matching it keeps your icon aligned and proportioned. The widget sizes the icon for you — don't hardcode width/height on the <svg>.
• Use currentColor for inline-SVG strokes/fills so the icon adopts the correct color in every context (header, active/inactive tab, buttons). Hardcoded colors won't adapt to light/dark themes or your header/footer color overrides.
• Keep it recognizable. Replacements inherit the same tap target and meaning — a custom send icon should still read as "send".
• Only trusted markup. Inline SVG is injected as-is, so set icons only from values you control (your own code/assets), never from user input. Prefer image URLs or data: URIs if the source isn't fully trusted.
• Partial overrides are fine. Any name you omit keeps its built-in icon, so you can brand just the tab bar or just the send button.
• Strip scripts. Don't include <script> or event handlers in inline SVG; provide static vector markup only.

Related

• Theming — colors, including header/footer icon colors
• Attributes reference