How to make my custom icon have color?

#1

Hi.
I have prepared a colored SVG icon and add a css class. Then I use it in my widget title icon, But It have no color when rendered. How to solved it

  • In my css
.tree-icon {
  -webkit-mask: url('../assets/tree.svg');
  mask: url('../assets/tree.svg');
}
  • In my widget
this.title.iconClass = 'autosar-icon';
#2

@Kevin thank you for the discussion, you can use the browser’s devtools to inspect if there is CSS stylings which may be overidding the color, likely contributed from theming so the application is consistent across views. If so you might need to include custom styling so your icon is rendered as you intend it to.