Change symbol size in legend for FeatureLayer (ArcGIS API for JavaScript)

Question

I'm learning how to create web applications using the ArcGIS API for JavaScript. I have a map that is displaying both an ArcGISDynamicMapServiceLayer (which includes two layers) and a FeatureLayer. I have successfully added a Legend using esri/dijit/legend, and it shows all the information I want. I then added code to my CSS file to further format the legend (to change font/size etc for titles and names). Ex:

.esriLegendLayer {
     font-size: 12px;
     font-family: 'Roboto', serif;
}

I was also able to successfully change the size of the legend symbols for the ArcGISDynamicMapServiceLayer using the following css code:

.esriLegendLayer img {
    width: 20px;
}

However, this does NOT effect the legend symbols for the FeatureLayer.

I want the symbols sizes to be the same throughout the legend. In the image above, you can see they are not, because the code is only altering the size for ArcGISDynamicMapServiceLayer symbols (top) but not FeatureLayer symbols (bottom).

I have tried unsuccessfully to find a way to change the symbol size for the FeatureLayer as well. I don't want to change the size of the symbol as displayed on the map, just on the legend, and I want to be able to set the size regardless of the size that was used when the service was created. This is important so we can have a general template that will result in the same general consistant look for the legend regardless of what layers/services are included.

Answer 1

Sorry for taking so long to respond to this - I forgot all about it!

In the end I discovered too many other limitations with the Dijit Legend widget, so ultimately I created my own, using an ajax call to the legend on the REST endpoint (.../MapServer/legend?f=pjson) to obtain the necessary info, including the symbol, which I was then able to style however I wanted.

It took some learning to create my own widgets, but it's been worth it for the increased freedom it allows me to get it just the way I want it!

Answer 2

Hopefully you've solved your issue by now, if so, please share! Otherwise, seems that some legend symbols (perhaps particularly, feature layers) are not img but rather svg. You can try the following css to resize this:

.esriLegendLayer svg {
  -webkit-transform: scale(2.0);
  -ms-transform: scale(2.0);
  transform: scale(2.0);
}

Where the 2.0 means double the size.

Answer 3

You may want to try adding the !important tag to your CSS. The API uses a lot of inline styles that will override anything in your stylesheets. The only way to override an inline style is to use the !important tag. For example:

.esriLegendLayer {
     font-size: 12px !important;
     font-family: 'Roboto', serif !important;
}