Cannot modify an icon's colour or size (class="icon")

[jeffreyselby]

The following tag renders correctly in GEL Version 1.
<span class="icon icon-remove icon-size-md" style="color:red"></span>

The same code does not render correctly in GEL Version 2. Both size (icon-size-md) and color (red) are ignored.

Could you please check this.

Thanks,

Jeff

[dominikwilkowski]

Hey @jeffreyselby

I don't know why the size would not work, I just tested it. The inline-style however wouldn't work on a background image. Have a read over at the GUI docs to find out how you can style the icons.

I leave this open for now to find out what your problem with the size is.

[jeffreyselby]

Regarding the icon size I was able to resolve the matter. Sorry for the misleading comment above.
I am still having difficulty with modifying the color of an icon. The Westpac GUI docs don't provide much information and upon reading the external site for grunticon and experimenting, I had no success. Seeing the coloring of icons for Version 2 is a major departure from Version 1, it would be helpful if an example is given on the Westpac GUI site. Could you please provide a simple example of setting the color for an icon. Many Thanks, Jeff

[dominikwilkowski]

No worries, we'll be refining the content in the getting-started page soon.

To colour it all you have to do is use direct embedding.

<span class="icon icon-size-lg icon-remove" data-grunticon-embed></span> would then embed the icon as an SVG and you can manipulate the SVG with CSS:

.icon.icon-remove .icons-background {
    fill: rebeccapurple;
}

[jeffreyselby]

I manage to provide color to the icon, but is the below the recommended way or is there an easier approach.

.my-div span path {
  fill: #ff0000;
  color:blue;
}

<div class="my-div">
  <span class="icon icon-remove icon-size-lg" data-grunticon-embed></span>
</div>

Just saw your comment above. Will take a look.

[dominikwilkowski]

Yes. Apart from the color attribute you won't need in an SVG this looks good.

[jeffreyselby]

I tried out your method and it worked fine. Your method is cleaner, so I'll stick to that. Thanks for your help!