Changing button icon (svg) at runtime

[Roberto Nicchi]

I have found how to set a button icon then the button is initialized.

 

unibutton -> ClientEvents -> UniEvents -> beforeInit

function beforeInit(sender, config)
{
  config.icon='files/images/test.svg'
}

 

but, how to change it ?

 

With my poor JS knoledge i have tryed as follow:

 

thebut-> ClientEvents -> UniEvents -> afterCreate

function afterCreate(sender)
{
     sender.changeicon = function() {
      sender.icon='files/images/test2.svg';
     }
}

In a Tunibutton onclick event:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  thebut.JSInterface.JSCall('changeicon')
end;

Doesn't have effect.

 

What's the right way ?

[Roberto Nicchi]

57 minutes ago, Roberto Nicchi said:

I have found how to set a button icon then the button is initialized.

 

unibutton -> ClientEvents -> UniEvents -> beforeInit

function beforeInit(sender, config)
{
  config.icon='files/images/test.svg'
}

 

but, how to change it ?

 

With my poor JS knoledge i have tryed as follow:

 

thebut-> ClientEvents -> UniEvents -> afterCreate

function afterCreate(sender)
{
     sender.changeicon = function() {
      sender.icon='files/images/test2.svg';
     }
}

In a Tunibutton onclick event:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  thebut.JSInterface.JSCall('changeicon')
end;

Doesn't have effect.

 

What's the right way ?

Ok i have found the solution

 

function afterCreate(sender)
{
     sender.changeicon = function() {
      sender.setIcon('files/images/test1.svg'); // <---- this is the correct code
     }
}

[Roberto Nicchi]

I miss only one thing: how to set the icon size ? If possible using css so, if necessary, i can change the css class and affect all the application.

thanks

[Sherzod]

4 minutes ago, Roberto Nicchi said:

I miss only one thing: how to set the icon size ? If possible using css so, if necessary, i can change the css class and affect all the application.

This post may help you, try:

 

[Roberto Nicchi]

46 minutes ago, Sherzod said:

This post may help you, try:

 

thanks

I have tryed but the icon size continue to be rendered small ..

See the attached example.

Project1.zip

[Sherzod]

51 minutes ago, Roberto Nicchi said:

I have tryed but the icon size continue to be rendered small ..

Then try this:

.customBtn .x-btn-icon-el {
    width: 64px;
    height: 64px;
    background-size: 64px auto;
}