Polymer 2.0 iron-iconset containing a comprehensive collection of SVG icon files

Is it possible to utilize the iron-iconset element to assign multiple icons from an external SVG file that contains all of my icon variations (each line representing a specific icon with its color, state, etc.)?

Imagine something like this:

<iron-iconset name="login" src="icons.svg" width="90" size="30" icons="normal invalid"></iron-iconset>

Where width denotes the width of the SVG file, size determines the size of the square logos, and there's a method to specify the height of the file along with the line to be used.

If this explanation is unclear, please let me know.

Thank you in advance!

Answer №1

The solution has been discovered. All I need to do is utilize the _offset-y attribute to align the icon correctly:

<iron-iconset name="ci-login" src="/src/themes/autovision/icons_autovision.svg" width="90" size="30" _offset-y="30" icons="normal invalid"></iron-iconset>

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

JSON is often portrayed as a singular value

I am attempting to save settings in my SQL Database and then restore them using ajax and php. However, I am encountering an issue where only one long JSON Value is returned instead of three separate values for each setting. Settings: {"setting1":"true","se ...

Google Chrome - flexbox - container element

Please check out this code snippet in Chrome: codepen example html: <div class='flexbox'> <div class='static'>ddd </div> <div class='flex'> <div class='flex-child'> < ...

Using Angular directives to pre-select a default option

I am currently working on a select HTML tag with two options, and I want to set the first option as the default choice. My select element includes Angular directives like ng-change and ng-model. I have attempted to achieve this by adding selected = "select ...

Redirecting in AngularJS after a successful login操作

Is there a way to redirect users back to the original page after they login? For example, if a user is on a post like www.example.com/post/435 and needs to log in to "like/comment" on the post, how can I automatically redirect them back to that specific po ...

How to calculate large integer powers efficiently in JavaScript using the mod

I'm currently on the lookout for a reliable JavaScript algorithm as I attempted to implement one using node.js : function modpow_3(a,n, module){ var u = BigInt('1'); var e = equals(a, u); if( e) return a; if(equalsZero(a)) return a; if(pair ...

Is there a way to position text at the bottom of a card?

Looking to showcase multiple articles on a single page? I utilized Bootstrap 5 cards to create a visually appealing layout. While everything turned out as I hoped, the only issue I'm facing is that the "read more" link is not positioned at the bottom ...

Modify the css file in swift or obj c without the need for javascript

Is there a way to modify the font, font color, and font size of an HTML page? I have successfully converted the CSS file into a string by using String(contentsOfFile). Is it possible to use regular expressions or something similar to make changes to the CS ...

Tips for implementing Animation.css in Angular version 1.5.8

I have successfully added the ngAnimate dependency to my AngularJS project: var app=angular.module('testApp',['ngRoute', 'ngAnimate']); I have also included the animation classes in my animation.css file: .slide-animation.n ...

Executing a single command using Yargs triggers the execution of multiple other commands simultaneously

I've been diving into learning nodejs and yargs, and I decided to apply my knowledge by creating a command-line based note-taking app. The structure of my project involves two files: app.js and utils.js. When I run app.js, it imports the functions fr ...

Ways to ascertain if a view has completed rendering in JavaScript

I am currently building my application using the awesome backbone.js framework. Within my code, I have this layoutView that handles rendering the overall layout and also includes a smaller profile section. The dilemma I'm facing is with the timing o ...

Tips for utilizing the standard search functionality of Select2 while also implementing a remote data source

Even though I am able to populate the dropdown from the data source, there is an issue with filtering the results using the search field at the top. If I make an AJAX request to the API, fetch the data, create <option> elements for each result, and a ...

Tips for obtaining intellisense for the value in a readonly string array property within an object without relying on generics

Keeping it brief and to the point. What is the reason behind this? type ReadonlyStringArray = readonly string[] type TEnumGeneric<EnumIsh extends ReadonlyStringArray> = { type: "enum", values: EnumIsh } type TEnumImplied = { t ...

Are you on the lookout for an Angular2 visual form editor or a robust form engine that allows you to effortlessly create forms using a GUI, generator, or centralized configuration

In our development team, we are currently diving into several Angular2< projects. While my colleagues are comfortable coding large forms directly with Typescript and HTML in our Angular 2< projects, I am not completely satisfied with this method. We ...

Enter the text div that has been chosen

I have a mini question regarding how to select text and place it in a selected div. This demo was created from codepen.io. In this demo, you will see a blue button and text in a textarea. I would like to be able to select the text "Select this text", cli ...

Cypress: harnessing the power of regular expressions within jQuery selectors for the ":contains()" method

Trying to use Cypress along with a regular expression to target an element that includes specific text. The following get() function successfully works: cy.get('[data-cy=tile]').contains(new RegExp(myVar)) However, the following command does no ...

What is the best method for getting rid of blank white space on my website?

Having some trouble removing unnecessary white space on my website. The goal is to have the main text and logo centered on an image background, but I've been unsuccessful so far. I've experimented with different CSS properties like overflow-x: ...

jQuery UI Dialog is causing my DOM elements to shift positions

I encountered an issue where my jquery ui dialog would only open once, To address this, I attempted the following solution: /* Prepare */ $('.steps > div.step-1 .bicicleta .attributos').dialog({ autoOpen:false, width: ...

Creating dynamic canvas elements with images using HTML and JavaScript

Currently, I am working on a unique project involving a canvas filled with dynamic moving balls. This project is an extension or inspired by the codepen project located at: https://codepen.io/zetyler/pen/LergVR. The basic concept of this project remains t ...

Using codedeploy to deploy a Next.js application onto an AWS EC2 instance

After creating a fresh NextJS app with only basic boilerplate files and folders, I uploaded it to a CodeCommit repository. I already had a functional CodePipeline and simply switched the Source stages. However, I am encountering deployment failures during ...

React and Express failing to display content

After relocating my React frontend folder to my collaborator's Express backend folder, here is our updated file structure. https://i.stack.imgur.com/i77XJ.png This code snippet represents app.js which is responsible for rendering the website. const ...