Icon

Examples

<nxt-icon name="star-o" size="small"></nxt-icon>
 
<nxt-icon name="star-o" size="small"></nxt-icon>
<nxt-icon name="star-o" size="medium"></nxt-icon>
<nxt-icon name="star-o" size="large"></nxt-icon>
<nxt-icon name="star-o" size="xlarge"></nxt-icon>
<nxt-icon name="star-o" size="xxlarge"></nxt-icon>
 
<nxt-icon name="star-o" size="small" outline></nxt-icon>
<nxt-icon name="star-o" size="medium" outline></nxt-icon>
<nxt-icon name="star-o" size="large" outline></nxt-icon>
<nxt-icon name="star-o" size="xlarge" outline></nxt-icon>
<nxt-icon name="star-o" size="xxlarge" outline></nxt-icon>
 
<nxt-icon name="star-o" size="small" fill></nxt-icon>
<nxt-icon name="star-o" size="medium" fill></nxt-icon>
<nxt-icon name="star-o" size="large" fill></nxt-icon>
<nxt-icon name="star-o" size="xlarge" fill></nxt-icon>
<nxt-icon name="star-o" size="xxlarge" fill></nxt-icon>
 
<nxt-icon size="small">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"
    />
  </svg>
</nxt-icon>

<nxt-icon size="medium">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"
    />
  </svg>
</nxt-icon>

<nxt-icon size="large">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"
    />
  </svg>
</nxt-icon>

<nxt-icon size="xlarge">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"
    />
  </svg>
</nxt-icon>

<nxt-icon size="xxlarge">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path fill="none" d="M0 0h24v24H0z" />
    <path
      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"
    />
  </svg>
</nxt-icon>
 
<nxt-icon size="small">
  <img src="/assets/images/icon.svg" />
</nxt-icon>

<nxt-icon size="medium">
  <img src="/assets/images/icon.svg" />
</nxt-icon>

<nxt-icon size="large">
  <img src="/assets/images/icon.svg" />
</nxt-icon>

<nxt-icon size="xlarge">
  <img src="/assets/images/icon.svg" />
</nxt-icon>

<nxt-icon size="xxlarge">
  <img src="/assets/images/icon.svg" />
</nxt-icon>
 
<link
  rel="stylesheet"
  href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
  integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
  crossorigin="anonymous"
/>

<nxt-icon size="small">
  <i class="fa fa-car"></i>
</nxt-icon>

<nxt-icon size="medium">
  <i class="fa fa-car"></i>
</nxt-icon>

<nxt-icon size="large">
  <i class="fa fa-car"></i>
</nxt-icon>

<nxt-icon size="xlarge">
  <i class="fa fa-car"></i>
</nxt-icon>

<nxt-icon size="xxlarge">
  <i class="fa fa-car"></i>
</nxt-icon>
 Functional icons
Product icons

import '@nxt/ndbx-components/icon';

NxtIcon

This component is used to display icons. Icons from the icon font can be included via the name attribute.

Tag: nxt-icon

Slots

Name Description
default

Inline SVG or image tags can be placed into the default slot.

Properties

Property Attribute Type Default Description
fill fill boolean false

Whether the icon is filled.
name name string ''

Sets the name for specifying the icon.
outline outline boolean false

Whether the icon has an outline.
size size NxtIconSize ...

Specifies the size of the icon.

Type Aliases

NxtIconSize

'auto' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'