Material Design Icons Viewer

Option 1: Distributing the Font

Pros: Distributing the material design icon font with your project gives you the ability to easily dynamically scale your icons at runtime. It also is easier at design time to change or pick different icons for your user interface than the other approach of creating bitmap glyphs.

Cons: You may need to write a setup installer to copy the font or add logic to extract and install the font for use by your program. Additionally, the end user might have a conflicting already installed version of the material design icon font on the computer they are already using.

Copy, Paste, and Code Points

When adding icons to your project using the first option you can simply copy the icon character from the utility and paste it into the caption or text property of the control. On some operating systems (Windows XP for example) you'll also need to set the font name property of the control to 'Material Design Icons'. On operating systems where the font name does not need to be set, you have the added bonus of being able to mix both normal latin characters and icon characters.

Another possibility of using the distributed font is that you have the additional option to set the icon using a code point. A code point is a unicode number used to designate a character glyph. This additional option would allow you, for example, to let the user pick or change the user interface icons.

To convert a code point into a string suitable for use in the caption of control you can use this programming code fragment.

function UnicodeToStr(C: LongWord): string;
begin
  if C = 0 then
    Result := #0
  else if C < $80 then
    Result := Chr(C)
  else if C < $800 then
    Result := Chr((C shr $6) + $C0) + Chr((C and $3F) + $80)
  else if C < $10000 then
    Result := Chr((C shr $C) + $E0) + Chr(((C shr $6) and
      $3F) + $80) + Chr((C and $3F) + $80)
  else if C < $200000 then
    Result := Chr((C shr $12) + $F0) + Chr(((C shr $C) and
      $3F) + $80) + Chr(((C shr $6) and $3F) + $80) +
      Chr((C and $3F) + $80)
  else
    Result := '';
end;

The above fragment could be used like this with a TLabel control to display a low battery icon next to a bit of warning text.



The above snippet will work on all operating systems but not render correctly on Windows XP.

Option 2: Creating Bitmap Glyphs

Pros: There is no need to create an installer for your program. Alternate sized glyphs and caption text can be combined in some controls with different layout options. Works well with every operating system.

Cons: Extra steps are needed to pick and create bitmap glyphs at design time. You might need to consider recoloring your icons at runtime if you want to use system color themes. Some controls will not allow you to combine glyphs and text.

Gylph Size and Color

When adding icons to your project as bitmap glyphs you can use the utility program to export characters and png images. The export feature gives you the option to select an icon size and file location. You can then load the png images into any component with a graphic property. These include components such as TSpeedButton, TImage, TTrayIcon, and TImageList.

Note: TSpeedButton gives you the option to use both a glyph and a caption, allowing you to combine icons and text at different locations and of varying sizes in your button controls.

Be aware that you extra steps are needed if want to match system theme colors with your icons on the end user's computer. To change the color of a bitmap glyph to match a color you can use this programming code fragment.

procedure Colorize(Bitmap: TBitmap; Color: TColor);
var
  W, H, X, Y: Integer;
  Source, Dest: PByte;
  A: Single;
begin
  if Bitmap.PixelFormat <> pf32bit then
    Exit;
  W := Bitmap.Width;
  H := Bitmap.Height;
  if (W < 1) or (H < 1) then
    Exit;
  Color := ColorToRGB(Color);
  Source := @Color;
  Bitmap.BeginUpdate;
  for Y := 0 to H - 1 do
  begin
    Dest := Bitmap.RawImage.GetLineStart(Y);
    for X := 0 to W - 1 do
    begin
      A := Dest[3] / 255;
      Dest^ := Trunc(Source[2] * A);
      Inc(Dest);
      Dest^ := Trunc(Source[1] * A);
      Inc(Dest);
      Dest^ := Trunc(Source[0] * A);
      Inc(Dest);
      Inc(Dest);
    end;
  end;
  Bitmap.EndUpdate;
end;

The above fragment could be used to change the glyph of a TSpeedButton to match the system defined windows text color.



It could also be used to make a yellow warning icon with a TImage like so.

• What's New
• Universal Setup
• Language Features
• Development Environment

• Forums
• Showcase
• Projects
• Jobs

• About Us
• Help Requests
• Consultation
• Legal