Skip to main content

How can I change icons in the theme?

· 3 minutes of reading time
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Today we want to show in a short blog post how you can change the default icons via the theming (Theme Designer).

1. Integrate icon font

In order for icons to be displayed, the desired icon font (e.g. Font Awesome Free) must first be integrated into the website (HTML). This is usually done using the following HTML:

<head>
<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
</head>

Store icon font in the theme

The KoliBri icon component encapsulates the icon font and therefore needs to know the CSS definitions of the icon identifiers selected in the design system. To do this, the CSS must be copied from the same CSS file as from 1. into the theme and stored with it.

  1. Open Theme Designer
  2. Select theme
  3. Select icon component
  4. Switch to component styling
  5. Paste CSS from icon font and save
  6. Apply theme to project

Change default icons in theme

Changing an icon is easy if the following principle is clear. All icons are represented by the web component kol-icon. This component always exports the icon part. A part provides access to specified CSS properties within a web component. See that as an example like this:

kol-icon::part(icon) {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
kol-icon::part(icon):before {
content: '😃';
}

In order to change an icon via the designer, the following steps have to be carried out:

  1. Open Theme Designer
  2. Select theme
  3. Select component where an icon should be changed
  4. Switch to component styling
  5. Determine specific selector on an icon
  6. Use specific selector to customize font and content
  7. Save Component CSS
  8. Apply theme to project

Here is a more complex example of pagination:

kol-button::part(icon) {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
kol-button.first::part(icon):before,
kol-button.previous::part(icon):before,
kol-button.next::part(icon):before,
kol-button.last::part(icon):before {
content: '😃';
}

FAQ

Why is the icon hanging a bit lower in the KolIcon?

With the CSS definition display:contents; on the kol-icon tag, the icon is properly aligned. The alignment of the icon component within other components always depends on the specific use.

Why can't I change the font size?

kol-icon::part(icon) {
font-family: 'Font Awesome 6 Free';
font-size: 2rem !important;
font-weight: 900;
}

The reason lies in the font CSS definition in the icon font itself and in the need to set the font size apply (inherit) when setting icons from outside.

.codicon[class*='codicon-'] {
font: 16px / 1 codicon;
}
:host > i,
:host > i::before {
font-size: inherit !important;
}

If you want to adjust the size of an icon, you can do this from the outside.

kol-icon {
font-size: 2rem;
}

Announcement Release 1.5

· 5 minutes of reading time
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Release 1.5 will be released soon and will bring numerous new components, improvements and simplified theming.

The most important changes are:

  • New components

    • Image
    • Popover
    • Split button
    • ToggleButton (see InputCheckbox)
    • Quote
  • Improvements

    • Performance

      • Performance was affected by the oversized CSS definitions in the icon component. The background are the many icon selectors in the icon fonts. However, only a fraction of these CSS definitions are really needed for a design system. For the components we went with the lightweight Visual Studio Code (Codicon) icon font and removed Iconont and Font-Awesome by default (can be upgraded again). Thus, this release brings with it a significant performance improvement when rendering the components.
    • Assets (Fonts and Icons)

      • Icon font versions have been updated
      • Assets have been split across themes where relevant. As a result, the KoliBri artifact (NPM package) can be reduced in size and thus downloaded and installed faster.
      • By storing a postinstall script, the assets can be automatically copied to the public/assets folder after each installation of the KoliBri packages.
         // package.json
        "scripts": {

        "postinstall": "npm-run-all postinstall:*",
        "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
        "postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
        },
        "devDependencies": {
        "cpy-cli": "^4.2.0",
        "npm-run-all": "^4.1.5",

        }
      • Then do a npm i (pnpm i) to automatically copy all assets to the public/assets folder.
      • So that the assets do not have to be checked in, they can be excluded in the .gitignore file.
        # .gitignore
        /public/assets/bundes/
        /public/assets/codicons/
        /public/assets/fontawesome-free/
        /public/assets/icofont/
        /public/assets/kreon/
        /public/assets/material-icons/
        /public/assets/material-symbols/
        /public/assets/noto-sans/
        /public/assets/roboto/
        /public/assets/tabler-icons/
        /public/assets/kolibri.ico
      • More icon fonts have been used in themes:
        • Microsoft Codicons
        • Google Material Icons
        • Google Material Symbols
        • Tabler Icons
  • Refactorings

  • We refactored a few components to extend functionality and improve maintainability.

  • Accordions

    • The header of the accordion is now implemented using KoliBri heading, button and span.
    • Accordions can now be opened and closed with animation.
  • Alert

    • The construction of the alerts has been revised to allow full flexibility for the design.
  • Heading

  • The heading component was provided with an expert slot.

    • Inputs, Select and Textarea
      • The construction of all input fields has been revised to improve designability and maintainability.
    • Nav
      • Expandable submenus now have a separate expand button. In this way, the actual menu item can be used independently of the opening and closing.
      • Menu items can now be links, buttons or plain text.
    • Table Pagination is now always at the top of the DOM to allow faster navigation for blind users. For sighted users, the pagination can be displayed either above or below the table via the theming.
    • Tabs
      • The tabs now use the KoliBri button component.
    • Tooltip
  • The tooltip is only intended for internal use in KoliBri components. To improve the designability, the tooltip is now provided without a shadow root. If the component is used outside of KoliBri, the styling must be added to the CSS styling of the project (website, app).

    • All relevant themes have been revised with regard to refactorings
  • Adapter

    • Added new adapter for Angular 16
  • KoliBri CLI

    • Templates
      • The templates have been revised and updated.
      • Angular template updated to version 16
  • Expert slot

    • The Expert slot can be used to paste any HTML instead of the text label at your own risk.

    • When introducing an expert slot, the property _label usually becomes mandatory. Either the label contains a text that is then displayed without a slot. Or it is empty and the Expert slot is activated.

      <kol-heading _label="Inhalt einer H4-Überschrift" _level="4"></kol-heading>
      <kol-heading _label="" _level="4">
      <span slot="expert"> Inhalt einer H4-Überschrift … </span>
      </kol-heading>
    • Heading: The heading now allows you to insert any content in expert mode. The required property _label was introduced for this purpose. Leaving the property empty (_label="") activates the expert slot.

  • Theming

    • Basic styling: We have reduced the CSS on the components to the essentials. The styling primarily only contains layout definitions without colors, distances and tokens. This makes creating your own themes much easier.
    • All of our themes have been adapted to the new basic styling definitions and have been significantly simplified as a result.
    • New themes
      • Theme of the European Commission
      • European Union theme
      • Theme for the new version of the Customs Design System (v2)
      • Theme of the federal style guide (federal government)
      • Theme of the Federal Central Tax Office (WIP)
      • Theme of the Free State of Thuringia (for demo purposes)
  • Documentation

    • Code examples
      • There is an example application () with numerous code examples.
      • Code samples have been expanded and updated
      • Example application can be checked out and started locally (is in the KoliBri repository).
      • Code examples are now displayed in the documentation.
      • Code Examples includes a handout view for theme presentations.
    • Texts
      • The texts have been revised and updated.
      • The texts have been translated into English.
  • Live Editor (beta): All components can now be reconfigured live. The changes are displayed directly on the component in the viewer next to it.

  • Functionalities

    • The link now allows specifying a filename for the download link.
    • The progress can now also display the progress as readable text and have a label.

Wie style ich eine Komponente?

· 2 minutes of reading time
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Am Beispiel der Badge-Komponente wollen wir einmal schauen, wie das Stylen funktioniert.

Herausforderung

Die Badge-Komponente hat einen Smart-Button und der soll optisch kleiner aussehen, wie ein Button, der immer mindestens 44px hoch und breit ist.

  • Bild einfügen vorher

Wir sehen im nachfolgenden HTML-Snippet, dass der umschließende Span die Badge-Hintergrundfarbe bestimmt. Da der Button innerhalb des Span ist, wird die Hintergrundfarbe auch auf den Button gesetzt. Der Button muss mindestens 44px hoch und breit sein, also wird auch der äußere Span mindestens 44px hoch und breit. Das wollen wir nicht.

<span class="smart-button" style="background-color: rgb(204, 222, 218); color: rgb(0, 78, 55);">
<kol-span-wc class="hydrated">
<span>
<span>Badge mit Schalter</span>
</span>
</kol-span-wc>
<kol-button-wc _hide-label="" class="hydrated">
<button aria-labelledby="cf22bf" class="normal icon-only" type="button">
<kol-span-wc class="icon-only hydrated" _hide-label="">
<span>
<kol-icon class="icon left hydrated" style=""></kol-icon>
</span>
</kol-span-wc>
</button>
<kol-tooltip aria-hidden="true" class="hydrated">
<div id="floating" style="left: 1233.91px; top: 312.5px; display: none; visibility: hidden;">
<div id="arrow" style="left: 19px; bottom: -5px;"></div>
<kol-badge id="cf22bf" class="hydrated" style=""></kol-badge>
</div>
</kol-tooltip>
</kol-button-wc>
</span>

Lösung

Idee 1

Wir optimieren die Komponente, indem wir die Hintergrundfarbe vom umschließenden Span entfernen und auf die beiden inneren Span-Elemente übertragen.

<span class="smart-button" style="color: rgb(0, 78, 55);">
<kol-span-wc class="hydrated" style="background-color: rgb(204, 222, 218);">
<span>
<span>Badge mit Schalter</span>
</span>
</kol-span-wc>
<kol-button-wc _hide-label="" class="hydrated">
<button aria-labelledby="cf22bf" class="normal icon-only" type="button">
<kol-span-wc class="icon-only hydrated" _hide-label="" style="background-color: rgb(204, 222, 218);">
<span>
<kol-icon class="icon left hydrated" style=""></kol-icon>
</span>
</kol-span-wc>
</button>
<kol-tooltip aria-hidden="true" class="hydrated">
<div id="floating" style="left: 1233.91px; top: 312.5px; display: none; visibility: hidden;">
<div id="arrow" style="left: 19px; bottom: -5px;"></div>
<kol-badge id="cf22bf" class="hydrated" style=""></kol-badge>
</div>
</kol-tooltip>
</kol-button-wc>
</span>

Das geht aber nicht, weil wir an den 2. Span nicht rankommen. Wir müssen also eine andere Lösung finden.

Idee 2

Es bleibt beim der initialen Komponenten-Konstruktion. Wir versuchen es mit CSS und erzwingen eine Zeilenhöhe für den umschließenden Span.

  • Bild Heihgt 1.75rem einfügen

Wir sehen im Bild, dass der linke Rand des Button oben rausragt. Das können wir aber leicht lösen, indem wir den linken Rand des Buttons auf 0 setzen und stattdessen einen rechten Rand am Text-Span setzen.