Load remote images into TRibbon BarItems at runtime

Question

I am using Delphi XE-5 and the TRibbon control and I am trying to populate my BarItems with images from remote location (URL). Everything is created at runtime except the Ribbon control itself, TImageList, and indy component (idHTTP).

here is the effect I am seeking

Here is what I have before loading the images

here is what it looks like after loading the images

The code below reads a JSON file which includes tabs, groups, and buttons, and creates tabs, groups, and buttons on the TRibbon Control. For each button, it retrieves the png from the internet and assigns it to a Bitmap and adds it to the ImageList, where it is assigned to a BarItem by its imageindex property. The images are 50X35 (I have changed the Imagelist properties to reflect that.) the code where the images are loaded is shown between the //**********//

procedure TfrmMain.Button1Click(Sender: TObject);
var
 I, J, K: Integer;
 JSONData, TabNames, GroupNames, ButtonNames: TStringList;
 NavData: TJSONObject;
 Tabs, Groups, Buttons, Tab, Group, Button: TJSONValue;
 TabItem: TRibbonTabItem;
 RGroup: TRibbonGroup;
 BarItem: TActionBarItem;
 BarAction: TActionClientItem;
 asset: String;
 HTTP: TIdHTTP;
 MS : TMemoryStream;
 png: TPngImage;
 bmp: TBitmap;
begin
 JSONData:= TStringList.Create;
 if openDialog1.Execute then
 begin
  JSONData.LoadFromFile(openDialog1.FileName);
  try
    NavData:= getJSONObj(JSONData.Text);
    if NavData <> nil then
    begin
     Tabs:= getTabs(NavData);
     TabNames:= TStringList.Create;
     getTabNames(Tabs, TabNames);
     for I:= 0 to TabNames.Count-1 do
     begin
      TabItem := Ribbon1.Tabs.Add;
      TabItem.Caption := TabNames[I];
      Tab:= getTabByName(Tabs, TabNames[I]);
      Groups:= getGroups(TJSonObject(Tab));
      GroupNames:= TStringList.Create;
      getGroupNames(Groups, GroupNames);
      for J:= 0 to GroupNames.Count-1 do
      begin
       RGroup := TRibbonGroup.Create(Ribbon1);
       RGroup.Parent := TabItem.Page;
       RGroup.Rows:= 1;
       RGroup.AutoSizing:= True;
       RGroup.Caption := GroupNames[J];
       Group:= getGroupByName(Groups, GroupNames[J]);
       Buttons:= getButtons(TJSonObject(Group));
       ButtonNames:= TStringList.Create;
       getButtonNames(Buttons, ButtonNames);
       BarItem := ActionManager1.ActionBars.Add;
       BarItem.ActionBar := RGroup;
       BarItem.AutoSize:= True;
       BarItem.GlyphLayout:= blGlyphTop;
       BarItem.BackgroundLayout:= blStretch;
       for K:= 0 to ButtonNames.Count-1 do
       begin
        BarAction := BarItem.Items.Add;
        BarAction.Caption := ButtonNames[K];
        BarAction.ImageIndex:= 0;
        Button:= getButtonByName(Buttons, ButtonNames[K]);
        asset:= StringReplace(TJSONObject(Button).GetValue('asset').ToString, '"','',[rfReplaceAll]);
        //******************************************************************************************
        //get and place asset on button
         MS := TMemoryStream.Create;
         png := TPngImage.Create;
         png.Transparent:= True;
         try
          idHTTP1.get(asset,MS);
          Ms.Seek(0,soFromBeginning);
          png.LoadFromStream(MS);
          //add to image list here
          bmp:= TBitmap.Create;
          bmp.Width:= 50;
          bmp.Height:= 35;
          png.AssignTo(bmp);
          ImageList1.Add(bmp, nil);
          BarAction.ImageIndex:= ImageList1.Count-1;
          bmp.Free;
         finally
         FreeAndNil(png);
         FreeAndNil(MS);
         end;
        //******************************************************************************************
       end; //for K:= 0 to ButtonNames.Count-1 do
      ButtonNames.Free;
      end; //for J:= 0 to GroupNames.Count-1 do
      GroupNames.Free;
     end;
     TabNames.Free;
    end;
  finally
    NavData.Free;
  end;
 end;
 JSONData.free;
end;