How to change the color of an svg element in Angular?

change svg image color angular
change svg color css
change svg color in img tag
change svg color on hover
svg elements angular
onclick change svg color
how to change color of icon svg
svg inline color change

I need to load, display and dynamically change the color of an SVG image in my Angular project by applying different CSS classes to it.

This question didn't help, since it makes use of the Modernizr library and I would like to avoid it. I don't want also to copy the d field in the path tag of the image I have directly in the html file of the Angular project because it would be a wall of text that I'm not willing to accept. I can accept instead the usage of an external dedicated library to achieve the correct outcome, like the ng-inline-svg, which I tried to use the following way:

<div class="svg1" aria-label="My icon"
   [inlineSVG]="'./assets/images/icons/ApplyIcon.svg'">
</div>

Defying the following CSS class:

.svg1 {
  color: green;
}

It loads the image perfectly as a regular img tag but if I try then to apply a custom class to it to change the image color, it doesn't work.

Furthermore, I tried to use the object tag the following way:

<div class="col-2">
    <object
       id="svg1"
       data="./assets/images/icons/ApplyIcon.svg"
       type="image/svg+xml">
    </object>
</div>

But, again, if I apply a class to the object tag with the CSS directives color: green; or fill: green; nothing would change. Any idea to achieve what I want?

Use the svg element in component.html file and use [ngClass] directive to dynamically change the inner svg class based on the conditions.

example:

component.ts

data.state = "New" || "In-Progress" || "Completed" // this changes dynamically based on the data

component.html:

<svg <circle class="cls-3" [ngClass] = "{'New': 'blue', 'In-Progress':'orange','Completed':'green'}[data.state]" cx="8.21" cy="8.01" r="2.44" transform="translate(-3.22 8.89) rotate(-48.73)"/></svg> // inner class of svg element

component.css:

.blue {
    fill:blue
}
.orange{
   fill: orange
}
.green {
   fill: green
}

The Many Ways to Change an SVG Fill on Hover (and When to Use , Using inline SVG allows you to set the fill , which cascades to all the elements within the SVG, or you can fill each element separately if needed. Using inline SVG allows you to set the fill, which cascades to all the elements within the SVG, or you can fill each element separately if needed. SVG Symbol / Use. There is such thing as an SVG sprite, which is a group of SVGs turned into <symbol> elements such that any given icon can be referenced easily with a <use> element. See the Pen Use

Use the setAttribute() property to change the color of the SVG,

document.getElementById("svg1").setAttribute("fill", "green");

Change Color of SVG on Hover, My current project is using Angular 8 and also heavily utilizes SVG, so you Since fill is an attribute on SVG elements you need to use [attr.fill] instead of [fill]. business-approved colors and quickly change them if necessary. On the database side, it's nothing to complex. I chose Firebase as my real-time backend, but the rest of this entry will show you a few different ways on how to render SVG using Angular. Getting Started. Here is an example of SVG content. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In .

fill: green;

works only for path element which is usually present in svg element. color property is for font color and it won't work on svg element. In your scenario you can below things 1) in your folder /assets/images/icons/ApplyIcon.svg edit svg icon and for that path give attribute fill="green" 2) If you want to use that icon on multiple places with different color then above method will not work because same color will get applied everywhere. In this case you can simply remove fill="color" from all path inside svg. and after this you can apply css

fill:color;

In this case although fill:color is not applied on SVG it will traverse to child element path and hence it will work.

Angular 8 SVG, Don't think you can control the CSS of an SVG file when the source is an <img> tag. To change fill and all the other properties you might have to have an inline� But what if we want to display some custom icons while staying consistent with the Material Design styling? Let’s learn how to use our own SVG icons in Angular Material components. This post assumes you have some basic knowledge of Angular v4.2+. The Angular version used in this example is v5.2+ and the angular material version is v5.2.4.

I recently faced this same issue and resolved it by generating a new Angular component and using my .svg file in place the the component's .html file.

For instance, updating the template path to point to your .svg, like this: templateUrl: './my-icon.component.svg'. You can then add Angular directives inside the SVG file.

Check out this example: https://levelup.gitconnected.com/using-svg-files-as-component-templates-with-angular-cli-ea58fe79b6c1

[Help] How to change a color of an SVG while using Angular JS , If cx and cy are omitted, the circle's center is set to (0,0); The r attribute defines the radius of the circle. ❮ Previous Next ❯ � COLOR PICKER. svg { fill: currentColor; } And that will ensure it snags the color from whatever you would normally expect it to. You can also apply the fill to the use, path, symbol, circle, rect, etc, but hitting the svg just kinda covers it all (which is nice for simple one-color use cases). See the Pen lcDBd by Chris Coyier (@chriscoyier) on CodePen.

SVG Circle, SVG has some predefined shape elements that can be used by developers: fill property defines the fill color of the rectangle; The CSS stroke-width property� Manipulating the DOM is easy with Angular. We can directly access the element by using ElementRef provided by @angular/core. If you manipulate it by using a directive (common use case) — most are…

SVG Rectangle, So the color can easily be changed by changing the color style on the svg-icon element. To install it run the following command: ng add @ngneat/� Obviously, this looks great, but won't be suitable for all scenarios or types of data, but hopefully this article will teach you some useful techniques, and show you what is possible with Angular and SVG, without too much coding. We will read in some JSON data, and use Angular to bind to SVG elements to create a diagram using SVG.

Elegantly Manage SVG Icons in Angular Applications, you can use ng-include to import svg elements to code, then select your specific element from imported svg and change css . for example : <div class="icon svg" ng� I'm submitting a bug report Current behavior When an <svg> element is rendered as part of an angular template, the actual element scales to the width and height set via css, but the contents of the <svg> don't scale accordingly.

Comments
  • Applying directly style="fill: green;" to the object tag doesn't work, as I explained in my question, so why should this work? Furthermore, in Angular projects we should avoid accessing the DOM directly like you're doing here because that's Angular’s sphere of control.
  • I noticed that the fill: green is correctly applied for the path element, but unfortunately your solution (1) doesn't work for me because I need to change that image color according to a status and I really would avoid solution (2) because I see it as an unnecessary overload. Isn't there really no other way to apply a fill property to a SVG image in Angular? Or rather, to load an SVG image as an icon maybe and change its color by applying a CSS class?
  • simply add inline svg icon instead of giving path of scg icon. now in path of svg you can dynamically change fill attribute based on your status.
  • Could you elaborate it more and/or provide an example, please?
  • added that in answer
  • In question you have mentioned that you don't want to put lengthy svg element in template so I think I approach will not work. I think without that you will not able to access path element as it create another embedded document element.