Icon
BsIcon is small, and a lightweight component. It can be used inside almost any component or html element. BsIcon loads icon from Google Material Symbols dynamically.
Overview
BsIcon uses the android icon name as in Google Material Symbols for its icon name. BsIcon 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.
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> 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> also has built-in animations, which are: Spin and Pulse.