Error with com.vaadin.flow.component.icon.IronIcon

General
1

Hi,
I have this error:

There was an exception while trying to navigate to '' with the exception message 'Error creating bean with name 'org.vaadin.example.MainView': Bean instantiation via constructor failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [org.vaadin.example.MainView]: Constructor threw exception; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'com.vaadin.flow.component.icon.IronIcon': Unsatisfied dependency expressed through constructor parameter 0; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'java.lang.String' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {}'

This is the code I have:
.ts:

import { LitElement, html, css, customElement } from 'lit-element';
import '@vaadin/vertical-layout/src/vaadin-vertical-layout.js';
import '@polymer/iron-icon/iron-icon.js';
import '@vaadin/horizontal-layout/src/vaadin-horizontal-layout.js';

@customElement('vista-listadecomentarios_item')
export class VistaListadecomentarios_item extends LitElement {
  static get styles() {
    return css`
      :host {
        display: block;
        height: 100%;
      }
    `;
  }

  render() {
    return html`
<vaadin-vertical-layout id="VL_listacomentarios_mainContainer" theme="" style="width: 100%; height: 100%; border: 2px solid blue; align-items: center; justify-content: center;
position: aboslute;">
 <vaadin-horizontal-layout id="HL_comentario_body" style="width: 100%; height: 70%; flex-grow: 0; flex-shrink: 1;">
  <vaadin-vertical-layout id="VL_datos_usuario" style="width: 10%; height: 100%; align-items: center; justify-content: center;">
   <vaadin-horizontal-layout id="HL_iconoYDatosUsuario" theme="spacing-s" style="width: 100%; height: 100%; align-items: center; justify-content: flex-start; margin-left: var(--lumo-space-m);">
    <iron-icon id="ironIcon_avatarUsuario" style="width: 28%; height: auto;" src="https://icons.getbootstrap.com/assets/icons/person.svg"></iron-icon>
    <vaadin-vertical-layout id="VL_nickYUsername" style="width: 100%; height: 100%; flex-grow: 0; flex-shrink: 1;">
     <vaadin-horizontal-layout id="HL_nickContainer" style="width: 100%; height: 50%;">
      <h4 id="h4_nickUsuario" style="width: auto; height: auto;"> Nick </h4>
     </vaadin-horizontal-layout>
     <vaadin-horizontal-layout id="HL_usernameContainer" style="height: 100%; width: 50%;">
      <label id="label_username">@user</label>
     </vaadin-horizontal-layout>
    </vaadin-vertical-layout>
   </vaadin-horizontal-layout>
  </vaadin-vertical-layout>
  <vaadin-vertical-layout id="VL_contenidoComentario" style="width: 90%; height: 100%; align-items: center; justify-content: center; border: 2px solid;">
   <label id="label_comentarioTexto">Comentario</label>
  </vaadin-vertical-layout>
 </vaadin-horizontal-layout>
 <vaadin-horizontal-layout id="HL_fechaYMeGusta" theme="spacing-xl" style="width: 11%; height: 30%; align-items: center; margin-left: var(--lumo-space-m); justify-content: space-between;">
  <label id="label_fechaComentario">Fecha</label>
  <iron-icon id="ironIcon_meGusta" src="https://icons.getbootstrap.com/assets/icons/heart-fill.svg"></iron-icon>
 </vaadin-horizontal-layout>
</vaadin-vertical-layout>
`;
  }

  // Evita usar Shadow DOM para que Vaadin LitTemplate encuentre los IDs correctamente
  createRenderRoot() {
    return this;
  }
}

.java:

package vistas;

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.littemplate.LitTemplate;
import com.vaadin.flow.dom.Element;
import com.vaadin.flow.component.template.Id;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.icon.IronIcon;
import com.vaadin.flow.component.html.H4;
import com.vaadin.flow.component.html.Label;

@Tag("vista-listadecomentarios_item")
@JsModule("./views/vista-listadecomentarios_item.ts")
public class VistaListadecomentarios_item extends LitTemplate {

	
	@Id("ironIcon_meGusta")
	private IronIcon ironIcon_meGusta;
	@Id("label_fechaComentario")
	private Label label_fechaComentario;
	@Id("HL_fechaYMeGusta")
	private HorizontalLayout hL_fechaYMeGusta;
	@Id("label_comentarioTexto")
	private Label label_comentarioTexto;
	@Id("VL_contenidoComentario")
	private Element vL_contenidoComentario;
	@Id("label_username")
	private Label label_username;
	@Id("HL_usernameContainer")
	private HorizontalLayout hL_usernameContainer;
	@Id("h4_nickUsuario")
	private H4 h4_nickUsuario;
	@Id("HL_nickContainer")
	private HorizontalLayout hL_nickContainer;
	@Id("VL_nickYUsername")
	private Element vL_nickYUsername;
	@Id("ironIcon_avatarUsuario")
	private IronIcon ironIcon_avatarUsuario;
	@Id("HL_iconoYDatosUsuario")
	private HorizontalLayout hL_iconoYDatosUsuario;
	@Id("VL_datos_usuario")
	private Element vL_datos_usuario;
	@Id("HL_comentario_body")
	private HorizontalLayout hL_comentario_body;
	@Id("VL_listacomentarios_mainContainer")
	private Element vL_listacomentarios_mainContainer;

	public VistaListadecomentarios_item() {
        // You can initialise any data required for the connected UI components here.
    }

	public IronIcon getIronIcon_meGusta() {
		return ironIcon_meGusta;
	}

	public void setIronIcon_meGusta(IronIcon ironIcon_meGusta) {
		this.ironIcon_meGusta = ironIcon_meGusta;
	}

	public Label getLabel_fechaComentario() {
		return label_fechaComentario;
	}

	public void setLabel_fechaComentario(Label label_fechaComentario) {
		this.label_fechaComentario = label_fechaComentario;
	}

	public HorizontalLayout gethL_fechaYMeGusta() {
		return hL_fechaYMeGusta;
	}

	public void sethL_fechaYMeGusta(HorizontalLayout hL_fechaYMeGusta) {
		this.hL_fechaYMeGusta = hL_fechaYMeGusta;
	}

	public Label getLabel_comentarioTexto() {
		return label_comentarioTexto;
	}

	public void setLabel_comentarioTexto(Label label_comentarioTexto) {
		this.label_comentarioTexto = label_comentarioTexto;
	}

	public Element getvL_contenidoComentario() {
		return vL_contenidoComentario;
	}

	public void setvL_contenidoComentario(Element vL_contenidoComentario) {
		this.vL_contenidoComentario = vL_contenidoComentario;
	}

	public Label getLabel_username() {
		return label_username;
	}

	public void setLabel_username(Label label_username) {
		this.label_username = label_username;
	}

	public HorizontalLayout gethL_usernameContainer() {
		return hL_usernameContainer;
	}

	public void sethL_usernameContainer(HorizontalLayout hL_usernameContainer) {
		this.hL_usernameContainer = hL_usernameContainer;
	}

	public H4 getH4_nickUsuario() {
		return h4_nickUsuario;
	}

	public void setH4_nickUsuario(H4 h4_nickUsuario) {
		this.h4_nickUsuario = h4_nickUsuario;
	}

	public HorizontalLayout gethL_nickContainer() {
		return hL_nickContainer;
	}

	public void sethL_nickContainer(HorizontalLayout hL_nickContainer) {
		this.hL_nickContainer = hL_nickContainer;
	}

	public Element getvL_nickYUsername() {
		return vL_nickYUsername;
	}

	public void setvL_nickYUsername(Element vL_nickYUsername) {
		this.vL_nickYUsername = vL_nickYUsername;
	}

	public IronIcon getIronIcon_avatarUsuario() {
		return ironIcon_avatarUsuario;
	}

	public void setIronIcon_avatarUsuario(IronIcon ironIcon_avatarUsuario) {
		this.ironIcon_avatarUsuario = ironIcon_avatarUsuario;
	}

	public HorizontalLayout gethL_iconoYDatosUsuario() {
		return hL_iconoYDatosUsuario;
	}

	public void sethL_iconoYDatosUsuario(HorizontalLayout hL_iconoYDatosUsuario) {
		this.hL_iconoYDatosUsuario = hL_iconoYDatosUsuario;
	}

	public Element getvL_datos_usuario() {
		return vL_datos_usuario;
	}

	public void setvL_datos_usuario(Element vL_datos_usuario) {
		this.vL_datos_usuario = vL_datos_usuario;
	}

	public HorizontalLayout gethL_comentario_body() {
		return hL_comentario_body;
	}

	public void sethL_comentario_body(HorizontalLayout hL_comentario_body) {
		this.hL_comentario_body = hL_comentario_body;
	}

	public Element getvL_listacomentarios_mainContainer() {
		return vL_listacomentarios_mainContainer;
	}

	public void setvL_listacomentarios_mainContainer(Element vL_listacomentarios_mainContainer) {
		this.vL_listacomentarios_mainContainer = vL_listacomentarios_mainContainer;
	}
	
	
	
}

Screenshot with error:

image
image1920×1080 211 KB

2

If you read the exception carefully, you can see it is talking about another class in your code - your MainView.java

You can’t inject a Icon in the constructor if it’s not a Bean

3

What should I do?
I extend the view in this class:

package interfaz;

import vistas.VistaAct06sesininiciada;
import vistas.VistaListadecomentarios_item;

public class Test extends VistaListadecomentarios_item {

	public Test() {
	}

   
}

And this is my MainView.java:

package org.vaadin.example;

import org.springframework.beans.factory.annotation.Autowired;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

import interfaz.ACT01UsuarioNoRegistrado;
import interfaz.ACT02UsuarioRegistrado;
import interfaz.ACT03Administrador;
import interfaz.Test;
import vistas.VistaListadecomentarios_item;

/**
 * A sample Vaadin view class.
 * <p>
 * To implement a Vaadin view just extend any Vaadin component and use @Route
 * annotation to announce it in a URL as a Spring managed bean.
 * <p>
 * A new instance of this class is created for every new user and every browser
 * tab/window.
 * <p>
 * The main view contains a text field for getting the user name and a button
 * that shows a greeting message in a notification.
 */
@Route
@CssImport("./styles/shared-styles.css")
@CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")
public class MainView extends VerticalLayout {

    /**
     * Construct a new Vaadin view.
     * <p>
     * Build the initial UI state for the user accessing the application.
     *
     * @param service
     *                The message service. Automatically injected Spring managed
     *                bean.
     */
    public MainView(@Autowired GreetService service) {
        // Use custom CSS classes to apply styling. This is defined in
        // shared-styles.css.
        // addClassName("centered-content");
    	Test test = new Test();
        add(test);
        
    }

}
4

I can’t help you with template magic. Just a guess, iron icon is not supported.

5

Do you know how can I replace IronIcon for Icon?

6

Which Vaadin version are you using?
IronIcon has been removed in Vaadin 24.0.0

Anyway, taking a look at the removed source code, it looks like it does not have a no-args constructor, so it is not compatible with template components binding.

image
image813×129 8 KB

In a Spring project, even if there is not a no-args constructor, Flow attempts to instantiate an object delegating the creation to Spring. However, in your case it fails because it cannot inject the strings defined in the constructor.

7

How can I fix it that?

8

Don’t use it. e.g. replace it with Vaadin Icon

9
10

I’m using Vaadin Designer in Eclipse when I put this of code:

<vaadin-icon icon="vaadin:phone"></vaadin-icon>

Not displayed in Vaadin Designer.
I’m using vaadin version 22.0.28

11

I can resolve that.
But why if I put a src it is not displayed?

image
image1920×1080 95.2 KB

12

src attribute works fine for me. Please double-check that the image URL is correct.
If I try the URL in the screenshot, I get a 404.