IronIcon ii = new IronIcon("maps", "directions-bus");
Button b = new Button("Test", ii);
The above code doesn’t show any icon when run.
Also, I tried: new IronIcon("icons", "add");
You need to make sure the corresponding HTML import containing the icons is also loaded.
Jouni Koivuviita:
You need to make sure the corresponding HTML import containing the icons is also loaded.
I tried to find out what is getting loaded:
@WebServlet(urlPatterns = "/*", name = "SOServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = Application.class, productionMode = false)
public static class SOServlet extends VaadinServlet {
@Override
protected boolean serveStaticOrWebJarRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String what = request.getPathInfo() == null ? request.getServletPath() : request.getServletPath() + request.getPathInfo();
System.out.println("Loading " + what);
return super.serveStaticOrWebJarRequest(request, response);
}
}
Loading /frontend/bower_components/webcomponentsjs/webcomponents-loader.js
Loading /frontend/bower_components/vaadin-text-field/theme/lumo/vaadin-text-field.html
Loading /frontend/bower_components/polymer/lib/mixins/element-mixin.html
Loading /frontend/bower_components/polymer/lib/utils/resolve-url.html
Loading /frontend/bower_components/vaadin-themable-mixin/vaadin-themable-mixin.html
Loading /frontend/bower_components/polymer/lib/utils/mixin.html
Loading /frontend/bower_components/polymer/lib/utils/import-href.html
Loading /frontend/bower_components/polymer/lib/mixins/property-effects.html
Loading /frontend/bower_components/polymer/lib/utils/html-tag.html
Loading /frontend/bower_components/polymer/lib/mixins/properties-changed.html
Loading /frontend/bower_components/vaadin-control-state-mixin/vaadin-control-state-mixin.html
Loading /frontend/bower_components/polymer/lib/utils/boot.html
Loading /frontend/bower_components/polymer/lib/utils/settings.html
Loading /frontend/bower_components/polymer/lib/utils/async.html
Loading /frontend/bower_components/polymer/lib/utils/path.html
Loading /frontend/bower_components/polymer/lib/mixins/properties-mixin.html
Loading /frontend/bower_components/polymer/polymer-element.html
Loading /frontend/bower_components/polymer/lib/elements/dom-module.html
Loading /frontend/bower_components/vaadin-text-field/src/vaadin-text-field-mixin.html
Loading /frontend/bower_components/polymer/lib/mixins/property-accessors.html
Loading /frontend/bower_components/vaadin-element-mixin/vaadin-element-mixin.html
Loading /frontend/bower_components/polymer/lib/utils/style-gather.html
Loading /frontend/bower_components/vaadin-development-mode-detector/vaadin-development-mode-detector.html
Loading /frontend/bower_components/polymer/lib/utils/case-map.html
Loading /frontend/bower_components/polymer/lib/mixins/template-stamp.html
Loading /frontend/bower_components/polymer/lib/elements/array-selector.html
Loading /frontend/bower_components/polymer/lib/elements/custom-style.html
Loading /frontend/bower_components/polymer/lib/utils/array-splice.html
Loading /frontend/bower_components/polymer/lib/utils/templatize.html
Loading /frontend/bower_components/polymer/lib/legacy/polymer-fn.html
**Loading /frontend/bower_components/iron-icon/iron-icon.html**
Loading /frontend/bower_components/polymer/lib/elements/dom-bind.html
Loading /frontend/bower_components/polymer/lib/utils/unresolved.html
Loading /frontend/bower_components/shadycss/apply-shim.html
Loading /frontend/bower_components/polymer/lib/mixins/mutable-data.html
Loading /frontend/bower_components/iron-meta/iron-meta.html
Loading /frontend/bower_components/polymer/lib/mixins/dir-mixin.html
Loading /frontend/bower_components/shadycss/custom-style-interface.html
Loading /frontend/bower_components/iron-flex-layout/iron-flex-layout.html
Loading /frontend/bower_components/polymer/lib/utils/debounce.html
Loading /frontend/bower_components/polymer/lib/utils/gestures.html
Loading /frontend/bower_components/polymer/lib/elements/dom-if.html
Loading /frontend/bower_components/polymer/lib/mixins/gesture-event-listeners.html
Loading /frontend/bower_components/polymer/lib/utils/render-status.html
Loading /frontend/bower_components/polymer/lib/elements/dom-repeat.html
Loading /frontend/bower_components/polymer/lib/utils/flush.html
Loading /frontend/bower_components/polymer/polymer.html
Loading /frontend/bower_components/polymer/lib/legacy/class.html
Loading /frontend/bower_components/polymer/lib/legacy/mutable-data-behavior.html
Loading /frontend/bower_components/polymer/lib/utils/flattened-nodes-observer.html
Loading /frontend/bower_components/polymer/lib/legacy/legacy-element-mixin.html
Loading /frontend/bower_components/polymer/lib/legacy/templatizer-behavior.html
Loading /frontend/bower_components/polymer/lib/legacy/polymer.dom.html
Loading /frontend/bower_components/vaadin-button/theme/lumo/vaadin-button.html
Loading /frontend/bower_components/vaadin-ordered-layout/theme/lumo/vaadin-vertical-layout.html
Loading /frontend/bower_components/vaadin-lumo-styles/color.html
Loading /frontend/bower_components/vaadin-lumo-styles/typography.html
Loading /frontend/bower_components/vaadin-lumo-styles/sizing.html
Loading /frontend/bower_components/vaadin-lumo-styles/spacing.html
Loading /frontend/bower_components/vaadin-lumo-styles/style.html
Loading /frontend/bower_components/vaadin-lumo-styles/icons.html
Loading /frontend/src/example-template.html
Loading /frontend/styles/shared-styles.html
Loading /frontend/bower_components/shadycss/apply-shim.min.js
Loading /frontend/bower_components/shadycss/custom-style-interface.min.js
Loading /frontend/bower_components/vaadin-lumo-styles/version.html
Loading /frontend/bower_components/vaadin-text-field/src/vaadin-text-field.html
Loading /frontend/bower_components/vaadin-button/src/vaadin-button.html
Loading /frontend/bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html
Loading /frontend/bower_components/vaadin-ordered-layout/theme/lumo/vaadin-ordered-layout.html
**Loading /frontend/bower_components/iron-iconset-svg/iron-iconset-svg.html**
Loading /VAADIN/static/client/client-52731741FE58EF8056D7E6EA323C8436.cache.js
Loading /frontend/bower_components/vaadin-usage-statistics/vaadin-usage-statistics.html
Loading /
Don’t see iron-icons.html there. That’s the one that actually contains the Material icons.
Jouni Koivuviita:
Don’t seeiron-icons.htmlthere. That’s the one that actually contains the Material icons.
Hi Jouni, it’s there. Please scroll up and see:
...
Loading /frontend/bower_components/polymer/lib/utils/templatize.html
Loading /frontend/bower_components/polymer/lib/legacy/polymer-fn.html
**Loading /frontend/bower_components/iron-icon/iron-icon.html**
Loading /frontend/bower_components/polymer/lib/elements/dom-bind.html
Loading /frontend/bower_components/polymer/lib/utils/unresolved.html
Loading /frontend/bower_components/shadycss/apply-shim.html
...
I’m experiencing the same issue after the update for vaadin-10.0.0.beta1. The icons inside my buttons disappears.
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/vaadin-button/src/vaadin-button.html">
<link rel="import" href="../../../bower_components/vaadin-icons/vaadin-icons.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
...
<vaadin-button id="btnActionAdd" theme="small primary">
<iron-icon icon="vaadin:plus-circle-o" slot="prefix"></iron-icon>
</vaadin-button>
<vaadin-button id="btnActionEdit" theme="small">
<iron-icon icon="vaadin:edit" slot="prefix"></iron-icon>
</vaadin-button>
<vaadin-button id="btnActionCancel" theme="small">
<iron-icon icon="lumo:cross" slot="prefix"></iron-icon>
</vaadin-button>
...
This doesn’t work anymore. Any suggestion to solve this issue?
You do import iron-icon.html and iron-iconset-svg.html, but those do not contain the actual SVG paths for the icons. You need to install and import the [iron-icons]
(https://vaadin.com/directory/component/polymerelementsiron-icons) package.
Diogo: are you importing the unstyled version of vaadin-button on purpose (from the src folder)? Any errors in the console?
Jouni Koivuviita:
Diogo: are you importing the unstyled version of vaadin-button on purpose (from thesrcfolder)? Any errors in the console?
No, I have imported manually using Intellij autocomplete and I chose the wrong file.
Jouni Koivuviita:
You do importiron-icon.htmlandiron-iconset-svg.html, but those do not contain the actual SVG paths for the icons. You need to install and import the [iron-icons]
(https://vaadin.com/directory/component/polymerelementsiron-icons) package.
Hi Journi,
I am not importing any html files myself, just doing it in Java only.
However, when I checked the IronIcon.java source code in the Flow framework, I can see that iron-icons.html is not imported there too. This could be a bug there. Can you please confirm?
@Tag("iron-icon")
@HtmlImport("frontend://bower_components/iron-icon/iron-icon.html")
public class IronIcon extends Component implements HasStyle {
...
...
Syam Pillai:
Jouni Koivuviita:
You do importiron-icon.htmlandiron-iconset-svg.html, but those do not contain the actual SVG paths for the icons. You need to install and import the [iron-icons]
(https://vaadin.com/directory/component/polymerelementsiron-icons) package.Hi Journi,
I am not importing any html files myself, just doing it in Java only.
However, when I checked the IronIcon.java source code in the Flow framework, I can see that iron-icons.html is not imported there too. This could be a bug there. Can you please confirm?@Tag("iron-icon") @HtmlImport("frontend://bower_components/iron-icon/iron-icon.html") public class IronIcon extends Component implements HasStyle { ... ...
Hy, Syam
I think you need to import iron-icons as Jouni sayd. Check the doc [here]
(https://vaadin.com/directory/component/polymerelementsiron-icons).
Ok, with all those imports, it’s working.
In order to use “maps” collection, it is required to import iron-icons/maps-icons.html too.
Thanks
Hello,
I can’t see any iron-icon when I try to insert it in a Polymer template.
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/vaadin-button/vaadin-button.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
...
<iron-icon id="iconx" icon="vaadin:plus"></iron-icon>
...
...
My project’s pom.xml:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>13.0.7</version>
<type>pom</type>
<scope>import</scope>
</dependency>
External libraries loaded are:
Maven:org.webjars.bowergithub.polymerelements:iron-icon:2.1.0
- iron-icon-2.1.0.jar
Maven:org.webjars.bowergithub.polymerelements:iron-icons:2.1.1
- iron-icons-2.1.1.jar
Maven:org.webjars.bowergithub.polymerelements:iron-iconset-svg:2.2.1
- iron-iconset-svg-2.2.1-jar
Guido,
You are using a Vaadin Icon (vaadin:plus), so you’ll need to import the Vaadin Icons html file as well:
<link rel="import" href="../../../bower_components/vaadin-icons/vaadin-icons.html">
Hi Martin, thanks for your help.
Unfortunately if I use an iron-icon it still does not work.
<iron-icon icon="icons:add-circle"></iron-icon>
However I found the problem: it is the import statement.
this import does not work
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
while this import works:
<link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
Thanks again for helping me point the problem.
Syam Pillai:
Ok, with all those imports, it’s working.
In order to use “maps” collection, it is required to import iron-icons/maps-icons.html too.
Thanks
I’m not using any html pages, only Java code, where do I import them? Can you point that out?
Maksim Ustinov:
Syam Pillai:
Ok, with all those imports, it’s working.
In order to use “maps” collection, it is required to import iron-icons/maps-icons.html too.
ThanksI’m not using any html pages, only Java code, where do I import them? Can you point that out?
Hava a look at my code:
[https://github.com/syampillai/SOComponents/blob/master/src/main/java/com/storedobject/vaadin/Icon.java]
(https://github.com/syampillai/SOComponents/blob/master/src/main/java/com/storedobject/vaadin/Icon.java)
I tried to put imports into my route but still images are missing:
I did something like this:
@Route(value = ROUTE, layout = LeftMenuLayout.class)
@NpmPackage(value = "@polymer/iron-icons", version = "3.0.1")
@JsModule("@polymer/iron-icons/iron-icons.js")
@JsModule("@polymer/iron-icons/av-icons.js")
@JsModule("@polymer/iron-icons/communication-icons.js")
@JsModule("@polymer/iron-icons/device-icons.js")
@JsModule("@polymer/iron-icons/editor-icons.js")
@JsModule("@polymer/iron-icons/hardware-icons.js")
@JsModule("@polymer/iron-icons/image-icons.js")
@JsModule("@polymer/iron-icons/maps-icons.js")
@JsModule("@polymer/iron-icons/notification-icons.js")
@JsModule("@polymer/iron-icons/social-icons.js")
@JsModule("@polymer/iron-icons/places-icons.js")
public class WeeklyLocationsListAddView extends VerticalLayout {
...
...
Button editSaveBtn = new Button("Save" , IronIcons.SAVE.create(), e -> grid.getEditor().save());
editSaveBtn.addThemeVariants(ButtonVariant.LUMO_SMALL, ButtonVariant.LUMO_PRIMARY);
}
Maksim Ustinov:
I tried to put imports into my route but still images are missing:I did something like this:
@Route(value = ROUTE, layout = LeftMenuLayout.class) @NpmPackage(value = "@polymer/iron-icons", version = "3.0.1") @JsModule("@polymer/iron-icons/iron-icons.js") @JsModule("@polymer/iron-icons/av-icons.js") @JsModule("@polymer/iron-icons/communication-icons.js") @JsModule("@polymer/iron-icons/device-icons.js") @JsModule("@polymer/iron-icons/editor-icons.js") @JsModule("@polymer/iron-icons/hardware-icons.js") @JsModule("@polymer/iron-icons/image-icons.js") @JsModule("@polymer/iron-icons/maps-icons.js") @JsModule("@polymer/iron-icons/notification-icons.js") @JsModule("@polymer/iron-icons/social-icons.js") @JsModule("@polymer/iron-icons/places-icons.js") public class WeeklyLocationsListAddView extends VerticalLayout { ... ... Button editSaveBtn = new Button("Save" , IronIcons.SAVE.create(), e -> grid.getEditor().save()); editSaveBtn.addThemeVariants(ButtonVariant.LUMO_SMALL, ButtonVariant.LUMO_PRIMARY); }
You should import those in the Java file where IronIcons class is defined.