SVG Icon
BsSvgIcon is a lightweight component which is primarily used to embed SVG icon inline inside an html element and the SVG icon is loaded from Google Material Symbols dynamically.
Overview
BsSvgIcon embed SVG inline, inside an html element. This component is also used internally by BsIcon and BsToggleIcon.
BsSvgIcon uses the android icon name as in Google Material Symbols for its icon name. BsSvgIcon 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.
width and height properties are used to set the icon size. And if not set, the default size will be used.
Outlined
Rounded
Sharp
Outlined Filled
Rounded Filled
Sharp Filled
IMPORTANT
- Since v2.1.0, Google Material Icons are replaced with Google Material Symbols.
- The
<bs-icon-svg>tag still works, but has been deprecated since v2.2.0.
Styling an Icon
<bs-svg-icon> can be styles with css class or inline style.
Outlined
Outlined Filled
Rotating an Icon
Additionally, you can also rotate the icon to some extent. Use flip property or rotation property to rotate the icon, but do not use both property together.
Flip
Rotate
Animation
<bs-svg-icon> also has built-in animations, which are: Spin and Pulse.
Spin animation
Pulse animation
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| filled | Boolean | false | Use Google Material Symbols with fill style variant. v2.1.0 |
| flip | String | Flip the icon, valid values are: horizontal, vertical, both. | |
| height | Number | 24 | The icon's height in pixel. |
| icon required | String | The icon's name. Updated in v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, or _sharp_filled. | |
| pulse | Boolean | false | Apply pulse animation. |
| rotate | Number | Rotate the icon, valid values are: 90, 180, 270. | |
| size | Number | Shortcut to create icon with equal height and width. v2.2.0 | |
| spin | Boolean | false | Apply spin animation. |
| width | Number | 24 | The icon's width in pixel. |