# SpeechToTextButton Icon Options

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`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#svgIcon)—Displays an SVG icon. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).
* [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#iconClass)—Displays an icon from a CSS class, such as a [Font Awesome](https://fontawesome.com/) icon.
* [`iconSize`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#iconSize)—Sets the size of the SVG icon.

## SVG Icons

To replace the default microphone icon, set the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#svgIcon) property property of the SpeechToTextButton to the necessary [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/svgicon).

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/speech-to-text/custom-icon/source.txt)

> 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](https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/#usage) so that the icon renders as expected.
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#icon) property to a font icon in the Kendo UI theme.

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

   * [`iconClass`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#iconClass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).

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

## Icon Size

The [`iconSize`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/speech-to-text/icon-size/source.txt)

## Suggested Links

* [SpeechToTextButton Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/speech-to-text/appearance)
* [API Reference of the SpeechToTextButton](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/speechtotextbuttonprops)
* [Icon Component](https://www.telerik.com/kendo-vue-ui-develop/components/icons/icon)