Is it possible to remove hideous outline around a TSpeedButton glyph?

Question

I've run into a bit of a snag, is it just me or can you not assign an image from a resource to TSpeedButton's glyph without a hideous black outline as shown below?

I've assigned it exactly the same way for the TImage component and I'm getting the result needed.

I've been searching for quite a while but no one seems to have this bizarre and annoying problem.

Here's my source code for the form below:

procedure TForm3.Button1Click(Sender: TObject);
var r : tresourcestream; png : tpngimage;
begin
  r := tresourcestream.CreateFromID(hinstance,34,'cardimage');
  png := tpngimage.Create;  
  png.LoadFromStream(r);  
  png.AssignTo(image1.Picture.bitmap);  
  png.AssignTo(speedbutton1.glyph);  
  png.Free;  
  r.Free;  
end;

34 is the image of type 'cardimage' that relates to the image being shown in the picture if you haven't guessed already.

Answer 1

The issue is clearly that the alpha channel is ignored in the left picture. Now, the TSpeedButton.Glyph property is a TBitmap, so it might be problematic to preserve the PNG alpha channel. For example,

var
  png: TPNGImage;
begin
  png := TPngImage.Create;
  png.LoadFromFile('C:\Users\Andreas Rejbrand\Pictures\alpha.png');
  SpeedButton1.Glyph.Assign(png); // or png.AssignTo(SpeedButton1.Glyph);

produces

One partial solution is to pre-blend the PNG image:

var
  png: TPNGImage;
  bm: TBitmap;
begin
  png := TPngImage.Create;
  png.LoadFromFile('C:\Users\Andreas Rejbrand\Pictures\alpha.png');
  bm := TBitmap.Create;
  bm.SetSize(png.Width, png.Height);
  bm.Canvas.Brush.Color := Self.Color;
  bm.Canvas.FillRect(Rect(0, 0, bm.Width, bm.Height));
  bm.Canvas.Draw(0, 0, png);
  SpeedButton1.Glyph.Assign(bm);