icons

One of the ways you can customize your Raspberry Pi 4 image is by adding assets like icons, which can be shared by multiple applications that are integrated into the project.

Integration approach

Use the following 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 were integrated for the default demolauncher screen:

  • round_power_button
  • round_add_circle

The following icons were integrated for an alternative window manager that is available to use:

  • baseline_settings
  • baseline_crop_square
  • sharp_subdirectory_arrow_left
  • baseline_videocam

Find more information on these icons in the "system" section of this chapter

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)

Add 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 was defined to future proof the macro so that if a different version were to be downloaded, you only have to modify the version definition to change the package and that updates the targets and some of the commands as well (this will work well as long as the publishers are consistent with their package and URL naming in the future).

Unpack the Google Material Design icons

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.

Add make targets for each icon

Next, add a Makefile target for cube_icon:

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

Noteworthy items to point out for this target:

  • 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.

  • Because this icon is used for two different desktop options (for more information, refer to the "snippets" section of this chapter), this 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 could be switched to black or colored icons, depending on what background is selected
    • screenwm icons are generally black because the dock backround is lightly colored, but color icons work as well.
    • with respect to icon and background image formats, RGBA 32bit png icons work best for both demolauncher and screenwm
    • note that these recommendations do not necessarily apply to icons and background images being integrated for other open source applications being integrated.

  • convert is a utility that is part of the open source ImageMagick image manipulation software.

  • Note that this target is not named in a way that it gets skipped when the icons are already generated. This was done for simplicity. The target could have been split into four, and named to match the final icon file names, and the steps split up accordingly to generate four individual icons.

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

Utilities

showimage

A utility application called showimage was integrated after the SDL_image library was integrated. This application allows you to display an image or icon.

This utility is useful to check that integrated icons or images are correctly integrated and are not corrupt. Refer to the example commands below and associated screenshots to confirm some of the integrated icons are not corrupt in your generated image.

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.

Usage:

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

Checking integrated icons

Rounded power button icon (white)

This icon is visible on first boot, as part of the default demolauncher interface:


default startup screen

You can also display it with showimage as follows:

showimage /usr/share/icons/google/round_round_power_button_white.png

test render of round power icon

Add circle icon (white)

This icon is also visible on first boot as part of the default demolauncher interface, and you can also display it with showimage as follows:

showimage /usr/share/icons/google/round_add_circle_button_white.png

test render of round power icon

Video camera icon (black)

This icon is visible as part of alternative window manager user interface, and you can also display it with showimage as follows:

showimage /usr/share/icons/google/video_icon_black.png

test render of video camera icon

Note that there's also a larger white version of this icon for use with the demolauncer as well.

Next steps

What can you do next?

  • You can integrate additional Google Material icons that you like 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. If you are a Font Awesome fan, integrate some Font Awesome icons and potentially swap out the Google Material icons that are similar if that works better for you.
Page updated: