Is it possible to import SVG files and inline them in Angular?

Question

Is it possible to import SVG files and inline them in Angular?

Behold, an SVG Circle:

<svg viewBox="0 0 104 104">
  <circle cx="52" cy="52" r="50" stroke="#003EFF" stroke-width="4" fill="#00FF98" />
</svg>

The Angular Project imports it in this manner:

import circle from './circle.svg';

Then, it is added to a div element like this:

<div [innerHTML]="svg" style="width:400px"><div>

However, it appears that Angular's XSS protection is stripping the content. Is there a workaround for this issue?

An attempt was made using the DomSanitizer instance like this:

  constructor(private sanitizer: DomSanitizer) {
    this.trustedCircle = sanitizer.bypassSecurityTrustUrl(this.svg);

But unfortunately, it was not successful.

javascript angular typescript ecmascript-6 single-page-application

Answer 1

Answer №1

Utilizing Angular Material has been incredibly useful for me:

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

Within the constructor:

constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
) { }

To add an icon or image in the ngInit method:

    this.matIconRegistry.addSvgIcon(
        'some-icon',
        this.domSanitizer.bypassSecurityTrustResourceUrl(
            '../img/some-icon.svg'
        )
    );

And then you can use it in your HTML like this:

        <mat-icon
            svgIcon="some-icon"
            class="icon-class"
            aria-label="some-icon">
        </mat-icon>

Answer 2

Utilizing Angular Material has been incredibly useful for me:

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

Within the constructor:

constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
) { }

To add an icon or image in the ngInit method:

    this.matIconRegistry.addSvgIcon(
        'some-icon',
        this.domSanitizer.bypassSecurityTrustResourceUrl(
            '../img/some-icon.svg'
        )
    );

And then you can use it in your HTML like this:

        <mat-icon
            svgIcon="some-icon"
            class="icon-class"
            aria-label="some-icon">
        </mat-icon>

Answer 3

Answer №2

Resolved the issue for you. Give it a try and see if it works.

import { Component } from '@angular/core';
import { DomSanitizer
} from '@angular/platform-browser';
import circle from './circle.svg';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  trustedCircle;
  constructor(private sanitizer: DomSanitizer) {
    this.trustedCircle = this.sanitizer.bypassSecurityTrustHtml(circle);
  }
}

Answer 4

Resolved the issue for you. Give it a try and see if it works.

import { Component } from '@angular/core';
import { DomSanitizer
} from '@angular/platform-browser';
import circle from './circle.svg';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  trustedCircle;
  constructor(private sanitizer: DomSanitizer) {
    this.trustedCircle = this.sanitizer.bypassSecurityTrustHtml(circle);
  }
}

Is it possible to import SVG files and inline them in Angular?

Answer №1

Answer №2

Similar questions

Error: The iOS 14.2 system is unable to locate the variable "webkit."

How can I detect when an image is loaded in a specific container division using jQuery?

Unable to retrieve $wpdb, returning as null

Can you explain the steps to implement this feature in a modal window using jQuery?

Utilize the function specified in an external file

The error callback for Ajax is triggered even though the JSON response is valid

Order of execution behavior

Exploring ways to retrieve checkbox values instead of boolean values upon submission in Angular

Are JS commands enough for using Node.js dom APIs like jsdom and cheerio, or do I have to rely on jQuery for these tasks?

Unlocking the ability to retrieve data generated by the context within getServerSideProps beyond its boundaries (for transitioning from Create React App to Next.js)

Exploring the money library in typescript after successfully installing it on my local machine

Guide to incorporating Moengage into Node.js APIs for delivering email notifications based on user interactions

Choose All Box for Dynamic Tables in AngularJS

center a horizontal line using StyledSheets in your project

Resizing tables dynamically using HTML and JavaScript

Invoke numerous HTTP requests and receive multiple observables in response

When using React and React Router v6, make sure to implement a 404 status code response for unmatched routes

Looking for a way to assign customized thumbnails to images in react-responsive-carousel and react-image-magnifiers?

What is the best way to store JSON encoded items in an array using square brackets?

Incorporating Hyperlinks into Text using React I18next