Toggle Icon
BsToggleIcon is a lightweight component which is used to toggle two different icon. It can be used inside almost any component or html element. BsToggleIcon load icon from Google Material Symbols dynamically.
Overview
BsToggleIcon uses the android icon name as in Google Material Symbols for its icon name. BsToggleIcon has six icon variants, namely: Outlined (default), Rounded, Sharp, Outlined Filled, Rounded Filled, and Sharp Filled.
Use suffix _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, or _sharp_filled on icon property to use the icon variant mentioned above, otherwise default icon variant will be used. Suffix _filled and _outlined_filled will display the same icon variant. And you can either use suffix *_filled or set the filled property to true to display an icon variant with fill style.
The size property is used to set the icon size. And if not set, the default size will be used.
INFO
Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.
IMPORTANT
The <bs-icon-toggle> tag still works, but has been deprecated since v2.0.0.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| filled | Boolean | false | Use Google Material Symbols with fill style variant. v2.1.0 |
| icon required | String | The default icon to display when model-value property is false or undefined. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: | |
| model-value v-model | Boolean | false | Value monitored by v-model to maintain icon state. v2.0.0 |
| size | Number | 24 | The icon's size. v2.0.0 |
| toggle-icon required | String | The icon to display when model-value property is true. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: |
| Name | Arguments | Description |
|---|---|---|
| update:model-value | ( value:Boolean) | Used to update the model-value property. v2.0.0 |