Skip to content

Icon

Default use:


vue
<h-icon icon="fas fa-home" />

Colors:


vue
<h-icon color="inherit" icon="fas fa-home" />

<h-icon color="primary" icon="fas fa-home" />

<h-icon color="secondary" icon="fas fa-home" />

<h-icon color="interactive" icon="fas fa-home" />

<h-icon color="grey" icon="fas fa-home" />

<h-icon color="success" icon="fas fa-home" />

<h-icon color="danger" icon="fas fa-home" />

<h-icon color="warn" icon="fas fa-home" />

<h-icon color="info" icon="fas fa-home" />

<h-icon color="inverse" icon="fas fa-home" />

With size:


vue
<h-icon icon="fas fa-home" size="medium" />

<h-icon icon="fas fa-home" size="large" />

<h-icon icon="fas fa-home" size="extra-large" />

<h-icon icon="fas fa-home" size="jumbo" />

<h-icon icon="fas fa-home" size="extra-jumbo" />

<h-icon icon="fas fa-home" size="giant" />

<h-icon icon="fas fa-home" size="extra-giant" />

<h-icon icon="fas fa-home" size="colossal" />

<h-icon icon="fas fa-home" size="extra-colossal" />

<h-icon icon="fas fa-home" size="mega" />

<h-icon icon="fas fa-home" size="extra-mega" />

<h-icon icon="fas fa-home" size="immense" />

With animation:


vue
<h-icon size="medium" icon="fas fa-spinner fa-spin" />

<h-icon size="medium" icon="fas fa-circle-notch fa-spin" />

<h-icon size="medium" icon="fas fa-sync fa-spin" />

<h-icon size="medium" icon="fas fa-cog fa-spin" />

<h-icon size="medium" icon="fas fa-spinner fa-pulse" />

<h-icon size="medium" icon="fas fa-stroopwafel fa-spin" />

Bounds:






vue
<h-icon color="inverse" icon="fas fa-home" bounds="circle" />
  
<h-icon color="inverse" icon="fas fa-home" bounds="rounded" />
  
<h-icon color="inverse" icon="fas fa-home" bounds="square" />