Icons

The components don’t ship icons. An icon attribute takes the class names of an icon, and the element renders an empty element with those classes for your CSS to draw. Any icon font, icon library or image works.

How an icon renders

icon="icon-search" renders:

<span
  class="gui-widget-icon icon-search"
  data-icon="icon-search"
  aria-hidden="true"
></span>

Hook	What it is
`gui-widget-icon`	On every icon. The stylesheet places and sizes it.
Your classes (`icon-search`)	The value of the attribute, as classes: several are fine.
`data-icon="icon-search"`	The same value, for a rule that reads it with `attr()`.

The icon is decorative: aria-hidden hides it from assistive technology, so the field’s label and the button’s text carry the meaning.

Which elements take icons

Element	Attributes
`gui-textinput`, `gui-select`, `gui-currency`	`icon`
`gui-password`	`icon`, `show-password-icon`, `hide-password-icon`
`gui-button`	`icon`, `icon-position` (`left` or `right`)
`gui-tags`, `gui-multi-select-trigger`	`icon`, `remove-icon`
`gui-pills`	`remove-icon`
`gui-file-upload`, `gui-multi-file-upload`	`icon`, `remove-icon`, `retry-icon`
`gui-date`, `gui-time`, `gui-date-time`	`icon`
`gui-range-date`, `gui-range-time`, `gui-range-date-time`	`icon`
`gui-time-picker`, `gui-range-time-picker`	`icon`
`gui-date-picker`, `gui-date-time-picker`, `gui-range-date-picker`, `gui-range-date-time-picker`	`icon`, `prev-month-icon`, `next-month-icon`
`gui-calendar`, `gui-date-time-calendar`, `gui-range-calendar`, `gui-range-date-time-calendar`	`prev-month-icon`, `next-month-icon`

The month buttons of the calendars show a caret without prev-month-icon and next-month-icon.

An icon font

Give the classes a ligature or a glyph. With Material Icons, one rule draws every icon from its data-icon value:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.gui-widget-icon[data-icon]::before {
  content: attr(data-icon);
  font-family: 'Material Icons';
  font-size: var(--gui-font-lg);
}

<gui-textinput label="Search" icon="search"></gui-textinput>

Or draw one icon per class, as this example does:

import { GuiTextinput } from '@golemui/gui-components/react';
import '@golemui/gui-components/index.css';

// Any icon font works: icon sets these classes on the icon element.
// This one draws a Material Icons ligature.
const iconStyles = `
  .icon-search::before {
    content: 'search';
    font-family: 'Material Icons';
  }
`;

export function TextInputIcon() {
  return (
    <>
      <GuiTextinput
        label="Search"
        icon="icon-search"
        placeholder="Search the docs"
      />
      <style>{iconStyles}</style>
    </>
  );
}

import {
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ViewEncapsulation,
} from '@angular/core';
import '@golemui/gui-components/textinput';

@Component({
  selector: 'app-text-input-icon',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  encapsulation: ViewEncapsulation.None,
  template: `
    <gui-textinput
      label="Search"
      icon="icon-search"
      placeholder="Search the docs"
    ></gui-textinput>
  `,
  styles: `
    /* Any icon font works: icon sets these classes on the icon element.
       This one draws a Material Icons ligature. */
    .icon-search::before {
      content: 'search';
      font-family: 'Material Icons';
    }
  `,
})
export class TextInputIconComponent {}

<script setup lang="ts">
import '@golemui/gui-components/textinput';
import '@golemui/gui-components/index.css';
</script>

<template>
  <gui-textinput
    label="Search"
    icon="icon-search"
    placeholder="Search the docs"
  ></gui-textinput>
</template>

<style>
/* Any icon font works: icon sets these classes on the icon element.
   This one draws a Material Icons ligature. */
.icon-search::before {
  content: 'search';
  font-family: 'Material Icons';
}
</style>

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@golemui/gui-components/textinput';
import '@golemui/gui-components/index.css';

@customElement('text-input-icon')
export class TextInputIcon extends LitElement {
  protected override createRenderRoot() {
    return this;
  }

  override render() {
    return html`
      <gui-textinput
        label="Search"
        icon="icon-search"
        placeholder="Search the docs"
      ></gui-textinput>

      <style>
        /* Any icon font works: icon sets these classes on the icon element.
           This one draws a Material Icons ligature. */
        .icon-search::before {
          content: 'search';
          font-family: 'Material Icons';
        }
      </style>
    `;
  }
}

<gui-textinput label="Search" icon="icon-search" placeholder="Search the docs"></gui-textinput>

<style>
  /* Any icon font works: icon sets these classes on the icon element.
     This one draws a Material Icons ligature. */
  .icon-search::before {
    content: 'search';
    font-family: 'Material Icons';
  }
</style>

An icon library

A library that draws its icons from classes, such as Font Awesome, works as it is: pass its classes, and load its stylesheet.

<gui-textinput label="Website" icon="fa-solid fa-globe"></gui-textinput>

Your own SVG

Draw a file with mask-image, so the icon takes the color of the text around it:

.gui-widget-icon.icon-pin::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url('/icons/pin.svg') center / contain no-repeat;
}

<gui-textinput label="Address" icon="icon-pin"></gui-textinput>

An SVG in a data: URL needs img-src data: in your Content Security Policy. A file on your own origin needs only img-src 'self'.

Size and color

Icons take the text color, --gui-text-default. Change it, or the size, with a rule on the icon:

gui-textinput .gui-widget-icon {
  color: var(--gui-intent-primary);
}

.gui-widget-icon[data-icon]::before {
  font-size: var(--gui-font-xl);
}