The core-icons icon doesn't appear as intended in version 1.2.1 of Polymer

Currently, I am working with Polymer version 1.2.1 and have included core-icons in my elements.html file using the following import statement:

<link rel="import" href="/bower_components/core-icons/social-icons.html">

Within a custom Polymer element, I am trying to display an icon using the code snippet below:

<paper-icon-button icon="social:person" class="dropdown-trigger"></paper-icon-button>

Unfortunately, the icon is not being displayed on the page.

The template section of the markup currently looks like this:

Hello World

If I change the icon attribute to "home", as shown below, the icon does appear:

Answer №1

The core-icons element is no longer recommended. Have you explored the option of using the updated iron-icons instead? () Check out the full list of available icons here: , which now includes social icons.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Material-UI's simplification of 10px comprehension

I'm a bit confused about why we have to do this for the 10px simplification: html { font-size: 62.5%; /* 62.5% of 16px = 10px */ } Shouldn't the following code handle everything? const theme = createMuiTheme({ typography: { // Set the ...

Customizable user profile page

I'm currently working with twitter bootstrap. My goal is to design a profile page featuring an edit button positioned on the top left corner. Upon clicking this button, all the profile details will transition into editable form fields (which I bel ...

Switch the menu state to closed when we click outside of it while it's open

I'm currently working on a scenario involving a menu that toggles when a button is clicked. The issue I'm facing is that when I click on the menu button, it opens correctly. However, the problem arises with the following code: Whenever I click ...

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

Bootstrap the registration form to center it in the layout

https://i.sstatic.net/IWSHz.png Here is the code snippet: <div class="col-md-4 col-md-offset-3">. I am new to Bootstrap and trying to center a form that is currently on the left. I have experimented with different col-md and col-xl numbers, but have ...

Trouble with background image displaying on meteor platform

Hey there! I'm in the process of replicating the HBO login page without functional links, but for some reason, the background image isn't loading properly. I suspect it might be an issue with resizing the image, but I can't pinpoint the exac ...

Populating Information on a Sideways Chronological Line

I am looking to develop a unique full-screen timeline web application that enables horizontal scrolling, displaying html-and-css-formatted text along with images, videos, and audio files. The timeline will begin at the present date on the right side, allo ...

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

Real estate for a targeted audience

1. Overview I have a list of selectors that should always apply certain properties. Some selectors require additional properties to be added. I'm struggling to find a way to achieve this without repeating code. 2. Minimal CSS Example (MCVE) 2.1 ...

Achieve uniform display across browsers: Implement Chrome's overflow ellipsis feature on Firefox

I am seeking a CSS solution to achieve the same "overflow: hidden" and "text-overflow: ellipsis" behavior in Firefox as I get in Chrome. In Chrome, when the width of the tag is reduced, the text gets hidden and replaced with an ellipsis. However, in Firefo ...

Can Vue.js 3 composition be leveraged with v-for to incorporate a query string into a router-link?

I have successfully implemented v-for for a URL path. Now, I am looking to merge the URL path with the query string in the router link tag. The query string will be the date from each item rendered by v-for. Is there a way to dynamically pass this query ...

What is the best way to deliver HTML and JavaScript content using Node.js from virtual memory?

Situation I'm currently developing an in-browser HTML/JS editor, utilizing memory-fs (virtual memory) with Webpack and webpack-html-plugin to package the files created by users in the editor. Storing the files in virtual memory helps avoid I/O operat ...

Transfer the value of a JavaScript variable to paste it into a fresh tab on Google Chrome

I have come across some examples where users can copy HTML text to the clipboard. However, I am working on something more dynamic. Here's what I'm trying to achieve: <button id="" ng-click="outputFolder()">Output Folder</button> $sc ...

What is the best way to position my div outside of the wrapper while keeping the text inside?

For example: I want the blue text that says "join our discord server" to extend to 100% width when it's placed inside the wrapper. The reason it's inside the wrapper is to ensure the text matches up perfectly with the rest of the content. ...

The issue arises when trying to use qtip2 in JavaScript upon page initialization

I successfully created a heatmap using JavaScript, utilizing a table with varying colors based on the displayed values' thresholds. To enhance user experience, I wanted to implement a popup window that shows additional information when hovering over a ...

What is the best method for retrieving the id from an <a> tag in HTML and passing it to a JSP

My dilemma involves a snippet of HTML code: <a href="mobile.jsp" id="s5" >Galaxy s5</a> <a href="mobile.jsp" id="iphone">Iphone 4S</a> <a href="mobile.jsp" id="xpr">Xperia</a> I am aiming to organize similar items on o ...

Tips for adjusting the progress bar to 100% and back to 0%

My goal is to increase the progress bar percentage with each click. Currently, it only goes up to 75%. When saving, it should show 100%, but it's not displaying that properly. On clicking the back button, it should reset to 0% on the third click. HTM ...

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

I am currently working on a table that has three columns: a label, a dropdown selector, and an input field. The challenge I'm facing is that the input field needs to accommodate multiple lines of content, specifically in JSON format. However, I want ...

Instructions on submitting a form containing multiple select lists using the enter key

After researching various threads, I have come across solutions using the JS onkeypress function to trigger actions with input fields. However, in my case, I need to implement this functionality with a form that consists of multiple select lists instead of ...