Q:
Icons from http://materialicons.com/icon/search don't work on website with Polymer-Dart
I have a project using Polymer 1.0 and Polymer Dart.
I want to use the icon-search from materialicons.com (https://material.io/icons/#ic_search), but they don't work.
I tried putting it in my site folder. I tried adding it as an icon in the material.svg.
The browser console gives me this error:
GET http://localhost:40484/icon-search.svg 404 (Not Found)
The icon-search code is this:
I tried importing it as a CDN instead of importing it. I also tried importing the CDN version of material icons instead of the local version. It still doesn't work. What could I be doing wrong?
A:
I can reproduce this. Polymer material icons are being loaded through CDN. This happens because the URLs are not correct.
Changing url to cdnjs.cloudflare.com/ajax/libs/material-design-icons/1.0.0/icon/search.html fixes this issue (if it was fixed when you typed this answer).
Or you can include them manually:
You might also want to look at https://github.com/flutterchina/flutter-svg/blob/master/doc/icon-library-using-svg.md
my_css.css
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
my_js.js
import 'package:polymer_interop/paper_elements.dart';
@CustomTag('custom-icon-demo')
class MyPolymerElement extends PolymerElement {
@observable String value;
MyPolymerElement.created() : super.created() {
this.value="hi";
}
void changeValue(event){
value=event.target.value;
}
@override
void attached() {
super.attached();
value=value.trim();
}
void updateStyles() {
setStyles((0, _) => {
return {
fontSize: 16,
color: "#000",
letterSpacing: "4px",
fontStyle: "italic"
};
});
}
}
my_js.js
@CustomTag('custom-icon-demo')
class MyPolymerElement extends PolymerElement {
MyPolymerElement.created() : super.created() {
setStyles((0, _) => {
return {
fontSize: 16,
color: "#000",
letterSpacing: "4px",
fontStyle: "italic"
};
});
}
void updateStyles() {
setStyles((0, _) => {
return {
fontSize: 16,
color: "#000",
letterSpacing: "4px",
fontStyle: "italic"
};
});
}
void changeValue(event){
value=event.target.value;
}
}
