Increase Icon Size

[TimHayes1]

How do I go about increasing the size of the icons in the Header Controller Widget?

[NickHarvey]

Hi Tim - I think you can change the size for these by editing the values in the apps' header controller css:  Example... "...\\FoldableTheme\widgets\HeaderController\css\style.css"

Change the "24" values below to the value that you need.  I also had to change the header width and the logo size to make this all work as well..

jimu-widget-header-controller .icon-node img{
  height: 24px;
  width: 24px;

HTH

-Nick

[RobertScheitlin__GISP · Accepted solution]

Nick,

   Is spot on. Here are a few other details.

1. CSS change mentioned above
2. line 783 in the HeaderCOntroller\Widget.js change marginTop: ((this.height - 24) / 2) + 'px' change the 24 to the same number you used in your step 1.
3. in the apps config.json find the header controller widget line and change the headers height there:

  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FoldableTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.1",
        "id": "themes_FoldableTheme_widgets_HeaderController_Widget_19",
        "icon": "themes/FoldableTheme/widgets/HeaderController/images/icon.png?wab_dv=2.1",
        "name": "HeaderController",
        "label": "Header Controller"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4. Then in the config.json still you will have to shift all the other widgets top down the amount that you increased the header (especially the maps top property).

[GeorgeKatsambas]

Widgets that are not in the header which  css files do you need to modify to change icon size?

[RobertScheitlin__GISP]

George,

   That is covered in this thread: https://community.esri.com/thread/171233 

[BrianEveritt1]

what about for dart theme. I'm trying to increase the size of the icons and the text that shows up when you hover over them. The icons are too small and the text is too small also for the project i'm doing. i've changed the icon size but it appears the icons wrap to the next line and a new scroll bar appears. Is there a way to make them increase in size and go down the line without becoming a icons you have to scroll too?