SpeechToTextButton Icon Options

Updated on Nov 11, 2026

The SpeechToTextButton displays a microphone icon by default and a stop icon while speech recognition is active. You can replace the default icon with an SVG icon, a font icon, or an icon from a CSS class, and change the icon size.

The SpeechToTextButton supports the following icon options:

• svgIcon—Displays an SVG icon. For available icons, refer to the list of SVG icons.
• icon—Displays a font icon from the Kendo UI theme. For available icons, refer to the list of font icons.
• iconClass—Displays an icon from a CSS class, such as a Font Awesome icon.
• iconSize—Sets the size of the SVG icon.

SVG Icons

To replace the default microphone icon, set the svgIcon property property of the SpeechToTextButton to the necessary SVGIcon.

The following example demonstrates how to replace the default microphone icon with different SVG icons.

Example

View Source

Loading ...

When the SpeechToTextButton is active, it still switches to the stop icon regardless of the custom icon you provide for the inactive state.

Font Icons

To display a Font icon inside the SpeechToTextButton:

1. Load the font icons in your project so that the icon renders as expected.
2. Depending on the font icons library, you can set the:

   • icon property to a font icon in the Kendo UI theme.

     vue

     <template>
         <SpeechToTextButton :icon="'microphone'" />
     </template>

   • iconClass property to a third-party font icon library (such as FontAwesome).

     vue

     <template>
         <SpeechToTextButton :icon-class="'fa fa-microphone'" />
     </template>

Icon Size

The iconSize property controls the SVG icon size. The theme controls the default size.

The available icon size options are:

• small
• medium
• large

The following example demonstrates how to change the icon size of the SpeechToTextButton.

Example

View Source

Loading ...

Suggested Links

• SpeechToTextButton Appearance
• API Reference of the SpeechToTextButton
• Icon Component