Home Components Icon
Icon
Overview API
Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
Usage
Color Variants 

  <goat-icon name="alarm"></goat-icon>

  <goat-icon name="alarm" class="inherit" style="color: var(--color-primary)"></goat-icon>
  <goat-icon name="alarm" class="inherit" style="color: var(--color-success)"></goat-icon>
  <goat-icon name="alarm" class="inherit" style="color: var(--color-warning)"></goat-icon>
  <goat-icon name="alarm" class="inherit" style="color: var(--color-error)"></goat-icon>

  <span style="color: pink">
  <goat-icon name="alarm" class="inherit"></goat-icon>
</span>
Sizes Fancy larger or smaller icons? Add size attribute for additional sizes. 

<goat-icon name="alarm"></goat-icon>
<goat-icon name="alarm" size="3rem"></goat-icon>
<goat-icon name="alarm" size="100px"></goat-icon>
Usage Color Variants Sizes
Properties
Events
Methods
CSS Custom Properties
Previous Next