Skip to main content

icons

Icons in glint use either Material Symbols or Font Awesome. You can use Font Awesome Pro in a micro-radiant plugin, but you will need a license for every contributor.

HTML​

Material symbols:​

<span class="material-symbol">star</span>

https://fonts.google.com/icons

Font Awesome​

<span class="fa-solid fa-star"></span>
<span class="fa-regular fa-star"></span>

https://fontawesome.com/search?ic=free

Icon Size​

<!-- 18px -->
<span class="material-symbol glint-icon-small">star</span>
<!-- 24px -->
<span class="material-symbol glint-icon-normal">star</span>
<!-- 36px -->
<span class="material-symbol glint-icon-large">star</span>

Component​

VariableIcon allows you to define alternatives based on what is available. This is mainly a solution for compatibility in case a component is used in a project where one of the icon frameworks is not available.

const icon = new VariableIcon('fa-solid fa-plus', {
  'fa-pro-light': 'fa-light fa-plus',
  'material-symbols': materialSymbol('add')
})

Used in a component:

<glint-styled-icon [icon]="icon" size="large"/>