How to integrate the Angular Material icon asset path with Django template?

1
votes

I have use Django as the back-end of my web system and the Angularjs material as the front-end.

In the front-end html files, I use the {% load staticfiles %} tag to specify the static files path. such as the angular-material.css file:

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'node_modules/angular-material/angular-material.css' %}"/>

When I put a to the html, it's md-svg-src attribute should be set to be specified as the svg file path. So how to set the svg file path as the value of md-svg-src without use {% load staticfiles %} tag? Because the md-icon is frequently used in the html, put a {% load staticfiles %} tag before every md-icon seems too ugly.

PS: my Angularjs script code is stored in a standalone js file index.js, the $mdIconProvider config is in this file too. However, I haven't found that Django could translate its template tag {% load staticfiles %} in js file.

1
javascripthtmlangularjsdjangoangular-material

1 Answers

2
votes

Why don't you use material icons ? with angular material, that is simple :

Search for your icon on material.io and just simply add the icon in your html page like this 

<i class="material-icons">name_of_material_icon</i>

Don't forget to add the material icons css stylesheet in your <head> element : 

<link rel="stylesheet" href="{% static 'path/to/material-icons.css' %}"/>