topic How do I override the Esri Icon Font (Calcite theme) styles? in ArcGIS JavaScript Maps SDK Questions

How do I override the Esri Icon Font (Calcite theme) styles?

mfcallahan — Tue, 26 Jan 2021 23:12:12 GMT

When using the Esri Icon Font (Calcite theme), I am attempting to override the font styles, however they do not seem to be applied. A working example is available here:

https://stackblitz.com/edit/web-platform-6q9noc

For example, if I set the color or the font weight property, I do not see that change applied in the map:

.esri-icon-check-mark {

color: blue;

weight: "bold";

}

What is the correct way to override these styles when using the Esri icon fonts as a graphic's symbol?

Re: How do I override the Esri Icon Font (Calcite theme) styles?

zaphod — Tue, 26 Jan 2021 23:19:47 GMT

So, this isn't what I'd consider a go-to, as many consider it improper, but if there aren't any other tips I'd consider adding !important

I haven't always had success with this Esri items, but that's one typical option for overriding CSS. For example:

p {
color: red !important;
}

I'm no expert though, so if anyone else has input, theirs may be best to follow first!

Re: How do I override the Esri Icon Font (Calcite theme) styles?

BlakeTerhune — Wed, 27 Jan 2021 15:10:54 GMT

You can set the color but I don't think font weight applies to SVG icons. In your sample, why can't you change the color property on line 82 where you define the textSymbol for drawing the point? Also, if you are adding the icon with your own html, you can change the class name to change the color.