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

Question

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?

blake.terhune · Answer

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.

zaphod · Answer

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!