Icon SVG
BsIconSvg 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
BsIconSvg embed SVG inline, inside an html element. This component is also used internally by BsIcon and BsToggleIcon.
BsIconSvg uses the android icon name as in Google Material Symbols for its icon name. BsIconSvg 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
INFO
Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.
Styling an Icon
<bs-icon-svg> 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-icon-svg> also has built-in animations, which are: Spin and Pulse.