ArcGIS Experience Builder Widget icon size

[MajeedP]

I have a custom widget that is added to a widget controller. I am able to add an icon to the widget using this section in the widget settings:

the problem is that the size of the image inside the icon, follows jimu-icon height and width and can't be changed:
<img src="mypng url" width="16" height="16" class="jimu-icon" alt="">

I have tried everything including changing the css in widget.tsx, but the css only applies to the element only after the widget is clicked. when the widget is opened, the size changes and the img inside icon has a larger size. I also tried to programatically change the style and attribute of the element inside the componentDidMount method of the widget, however still no luck. I played with the jimu-icon settings a bit, I changed the size of the config.json in ..\ArcGISExperienceBuilder\server\public\apps\3\resources\config like this:

"icon": {
"svg": "${appResourceUrl}/images/icon_picker_in_setting/1700936360929.png",
"properties": {
"filename": "1700936360929.png",
"originalName": "pngegg.png",
"path": "${appResourceUrl}/images/icon_picker_in_setting/1700936360929.png",
"isUploaded": true,
"inlineSvg": false,
"size":22
}
but seems like the size attribute doesn't change.

I have done the same with the default icon.svg in the widget folder itself, but still no luck. Any help will be much appreciated. 

[JeffreyThompson2]

The best way to alter the button sizes is to alter the css. This can either be in the style.scss of your theme or in a custom widget that is always open (i.e. not in a widget controller or on a different page or view). You will want to use a compound selector to prevent other icons from also being altered. This one should work.

.avatar-button .jimu-icon {
    height: 50px;
    width: 50px;
}

[MajeedP]

Thanks Jeffrey,

I can't have a widget which is always open.  where is the style.css of my theme? I don't see a style.css anywhere.  

[JeffreyThompson2 · Accepted solution]

You will need to create it. Here is the theme development guide.

[MajeedP]

Thanks  a lot for your help Jeffrey,

I created a style.scss file in the themes folder, as instructed in the link you sent, and added your code to it. npm started client and server. Nothing changed, still using the default width and height of 16:

[JeffreyThompson2]

Did you select your custom theme in the build mode?

[MajeedP]

Not sure what you mean by build mode. If you are referring to this page, I can select one of these and even if I click customize it allows me to change font and colors. 

Here what I see in the customize screen:

[MajeedP]

Please note that I don't want to create a new theme, I just want to override this single css rule. 

[MajeedP]

This is what worked for me. I added all the files of a new theme. I left all empty except for the style.scss in which I added the style. Then selected my theme in the build mode and the change to the style was applied:

[JeffreyThompson2]

Great. Those are exactly the missing steps. I did not fully explain.