icons

Integrating icons

Follow this general approach to download and integrate icons:

  1. Add a Makefile target to clone an icons repo, or in some cases, download a release package generated from the repo.

  2. Unpack the icons package into a folder, if required. Note that it's best to use the folder name of the unpacked package or the repo folder as the target name so that the download won't repeat if a previous build completed the download. This is more efficient, but it also means you need to perform a clean operation with make to forcibly update the contents if it comes from a git repo.

  3. Add a Makefile target for each icon to be integrated, especially if the icons have to be manipulated (e.g., they need to be colorized). You should also add the icons download target as a dependency to ensure the icons package or repo folder is created before the target is executed

    After downloading and colorizing the icons, copy them to the icons/google folder. The icons folder is included as a whole into the following locations on the Raspberry Pi 4:

    • /system/share/icons
    • /usr/share/icons

  4. Add the new make target for the icons being integrated as a dependency to the all target, so that it builds by default.

Integrating Google Material Icons

The icons folder Makefile integrates some of Google's Material Icons to demonstrate the approach described above.

The Google Icons site, where you can go review the latest icons is at: https://fonts.google.com/icons?icon.size=24&icon.color=%231f1f1f

This is where you can search and browse for icons and find their base name to locate the individual icon files to integrate.

Once you have the base name, you can search for the icons in the downloaded set of icons that is obtained from the GitHub repo located at: https://github.com/google/material-design-icons

Note that Google's current set of icons that you can browse is called Material Symbols, which is now generated using variable fonts. As a result, some of the icons that show up in the search are not available in Google Material Icons, which was last updated in 2020 (the version 4.0.0 release package is included in the Makefile).

Icon integrations

The following icons are integrated into the default demolauncher screen:

  • terminal_black_large.png
  • maze.png
  • gears.png
  • vkcube_large.png

The following example reviews one of the integrations in the Makefile in more detail and highlights the changes that match the general integration steps described above.

Example integration: baseline crop square (cube_icon)

  1. Add an icon package folder target to download icons.

    This excerpt is the target for downloading the Google Material Design icons and unpacking its folder:

    # Download latest Material Icon's release zip file
$(PWD)/material-design-icons-$(MATERIAL_DESIGN_ICONS_VERSION):
    mkdir -p $(PWD)/icons/google
    wget https://github.com/google/material-design-icons/archive/refs/tags/$(MATERIAL_DESIGN_ICONS_VERSION).zip
    unzip $(MATERIAL_DESIGN_ICONS_VERSION).zip
    $(RM_HOST) -rf $(MATERIAL_DESIGN_ICONS_VERSION).zip

    Note that a version variable is defined to future proof the macro so that if a different version were to be downloaded, you'd only have to modify the version definition to change the package. This would also update the targets and some of the commands as well (this works well as long as the publishers are consistent with their package and URL naming in the future).

    The above excerpt also unpacks the icons package into a folder. Note that the target name matches the folder name of the unpacked package (when the version value is expanded). The zip file downloaded is also deleted, to avoid a remnant package remaining and complicating a rebuild after cleaning.

  2. Add make targets for each icon.

    You need to add a Makefile target for cube_icon. The make target for the icon is dependent on the download and unpacking target for the icon set. This is important to ensure proper order of operations.

    Furthermore, because this icon is used for two different desktop options (for more information, refer to the "snippets" section of this chapter), notice that the following example creates two different sizes of icons, and a black and white version (colorizing):

    • 128x128 icons are generated for demolauncher.
    • 40x40 icons are the ideal size for the screenwm window manager dock.
    • demolauncher's icons are generally white by default, but you can switch them to black or colored icons, depending on the background.
    • screenwm icons are generally black because the dock background is lightly colored, but colored icons work as well.
    • With respect to icon and background image formats, RGBA 32bit PNG icons work best for both demolauncher and screenwm.
    • The convert utility is part of the open-source ImageMagick image manipulation software.
      Note:
      • These recommendations do not necessarily apply to icons and background images being integrated for other open-source applications being integrated.
      • This target isn't named in a way that it gets skipped when the icons are already generated for simplicity.
    cube_icon: $(PWD)/material-design-icons-$(MATERIAL_DESIGN_ICONS_VERSION)
    convert material-design-icons-$(MATERIAL_DESIGN_ICONS_VERSION)/android/image/crop_square/materialicons/black/res/drawable-xxxhdpi/baseline_crop_square_black_36.png -resize 128x128 -type TrueColorAlpha icons/google/cube_icon_black_large.bmp
    convert icons/google/cube_icon_black_large.bmp PNG32:icons/google/cube_icon_black_large.png
    convert icons/google/cube_icon_black_large.bmp -type TrueColorAlpha +level-colors "#ffffff", PNG32:icons/google/cube_icon_white_large.png
    convert material-design-icons-$(MATERIAL_DESIGN_ICONS_VERSION)/android/image/crop_square/materialicons/black/res/drawable-xxxhdpi/baseline_crop_square_black_36.png -resize 40x40 -type TrueColorAlpha icons/google/cube_icon_black.bmp
    convert icons/google/cube_icon_black.bmp PNG32:icons/google/cube_icon_black.png
    convert icons/google/cube_icon_black.bmp -type TrueColorAlpha +level-colors "#ffffff", PNG32:icons/google/cube_icon_white.png
    rm icons/google/cube_icon_black*.bmp

  3. Add new icon target as a dependency to the all target

    And finally, add the new icon target to the all target:

    all: round_power_button round_add_circle_button gears_icon cube_icon maze_icon video_icon

The showimage utility

A utility application called showimage is integrated into the image. The utility allows you to display an image or icon.

This utility is useful to check that integrated icons or images are correctly integrated and aren't corrupt, as shown in the following example:

qnxuser@qnxpi:~$ showimage
INFO: Usage: showimage [-fullscreen] [-save file.png] <image_file> ...

Note that this utility generally displays full screen, so smaller graphical icons will likely display distorted as a result. Transparent icons render with a checker box pattern behind them.

Next steps

What can you do next?

  • You can integrate additional Google Material icons for the desktop or other applications.
  • The fonts folder has free Font Awesome fonts integrated, but that package also contains the SVG files for all of the icons in the fonts. Consider integrating them and potentially swapping out the equivalent Google Material icons.
Page updated: