Changing the color of Icons

530
3
Jump to solution
10-02-2023 09:35 AM
PatrickMarshallTT
New Contributor II

I am trying to edit the color of these icons that are within a text element. I have tried to edit the HTML code but the color does not change. Does anyone have any idea?

PatrickMarshallTT_0-1696264536600.png

 

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

@PatrickMarshallTT 

My answer might vary slightly, depending on what you are using for the source of the icons. If the icons are SVG objects that have been pasted into the text card - then you will want to use the fill attribute, as the color attribute does not work on SVGs. You could do this as inline styling:

<svg style="fill:blue;"></svg>

or as embedded styles:

<style>
.setting-svg-color {fill: blue;}
</style>

<svg class="setting-svg-color"></svg>

View solution in original post

0 Kudos
3 Replies
jcarlson
MVP Esteemed Contributor

The color is one of the built-in settings, unless you're pulling these in from an HTML source?

jcarlson_0-1696269401422.png

 

- Josh Carlson
Kendall County GIS
0 Kudos
KlaraSchmitt
Esri Contributor

@PatrickMarshallTT 

My answer might vary slightly, depending on what you are using for the source of the icons. If the icons are SVG objects that have been pasted into the text card - then you will want to use the fill attribute, as the color attribute does not work on SVGs. You could do this as inline styling:

<svg style="fill:blue;"></svg>

or as embedded styles:

<style>
.setting-svg-color {fill: blue;}
</style>

<svg class="setting-svg-color"></svg>

0 Kudos
JordanT
Esri Contributor

I just did some testing on my end. What are you using for your HTML code I was able to change mine as long as I am using the fill style. 

Code used

JordanT_3-1696269974356.png

 

 

Before change 

JordanT_0-1696269775784.png

 

After Change

JordanT_1-1696269782239.png

 

Jordan T
0 Kudos