3

When providing a background image for an element, everything works fine:

<div [style.background-image]="sanitizedStyleValue"></div>

But how can I provide a mask-image for an element? This:

<div [style.mask-image]="sanitizedStyleValue"></div>

is not working. Also

<div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>

does not work. I don't even get a warning in the console.

Is this due to DomSanitizer's ignorance of mask images' right for existance, or is there another way to achieve this?

Context

I want to create an IconComponent where I can Input() an icon name which will be used as part of an url for the mask image. Another Input() holds the background color. This way, I can combine different icons with different colors.

I would like to prevent creating CSS-classes for every possible icon.

Community
  • 1
  • 1
uruk
  • 1,094
  • 2
  • 14
  • 26

2 Answers2

2

According to the documentation, for CSS masks to work with chrome, you need to prefix the rules with -webkit-

So this shoud work

<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>

Note: According to W3C recommendations, the images you are using for the mask must be returned with correct CORS headers.

User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all , and values on the mask-image, mask-border-source and clip-path properties. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors, the effect is as if the value none had been specified.

David
  • 33,444
  • 11
  • 80
  • 118
1

Try this :- 

[ngStyle]="{ 'mask-image': 'url(' + maskedImagedUrl + ')'}"
Aakash Garg
  • 10,649
  • 2
  • 7
  • 25
  • This is the CSS-only approach which would clearly work. But I want to dynamically set the mask image as a custom Input() of an IconComponent. Updated question. But thanky anyway. – uruk May 24 '20 at 08:33
  • what is in sanitizedStyleValue ? – Aakash Garg May 24 '20 at 08:45