The core-icons themselves are resizeable, this is one of the reasons we use SVG (by default; another reason being the ability to colorize).

But *-icon-button doesn't provide a conduit for controlling this size.

I created some issue tickets:

https://github.com/Polymer/core-icon-button/issues/3

https://github.com/Polymer/paper-button/issues/9

Icon size doesn't reflect the one set in `--paper-icon-button` � Issue , If I give paper-icon-button a different size than default one by using --paper-icon- button, for example paper-icon-button { --paper-icon-button: { width: 16px; https ://elements.polymer-project.org/elements/paper-icon-button? Polymer-Paper icon button. In Polymer.js, paper icon button is an action button which is used to represent a particular action such as settings. It shows a ripple effect when the user touches the button. These buttons can be used as a link or you can give some styling to the buttons as shown in the following example.

In 1.1, the correct way to do this is:

.my-button {
  --paper-icon-button: {
    width: 24px;
    height: 24px;
  }
}

polymer/paper-icon-button, Buttons can use iron-icons or external images, and can be disabled. <paper-icon -button icon="favorite" title="heart"></paper-icon-button> <paper-icon-button� The default icon size is 24px square. An icon can be displayed using src as shown below − <iron-icon src = "icon.png"></iron-icon> The following code shows how to set the size of an icon.

Since Polymer 1.x CSS variables provide a convenient way to achieve the desired effect. In case of paper-icon-button, which incorporates iron-icon it is possible to set iron-icon specific CSS variables:

.my-button {
--iron-icon-height: 24px;
--iron-icon-width: 24px;
}
...
<paper-icon-button icon="menu" class="my-button"/>

PolymerElements/paper-icon-button, To use icons from the default set, include @polymer/iron-icons/iron-icons.js , and use the icon attribute to specify which icon from the icon set to use. See:� If the first, I'm not sure, probably no good reason. If the second, I can't find any --paper-ripple-opacity in paper-ripple.

you can try this workaround:

paper-icon-button::shadow core-icon{ 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    transform: scale(2); /* 48px */

    fill: rgb(255,255,255);
}

polymer paper-icon-button specify width of icon, Using <paper-icon-button icon='image:photo' fill="true"></paper-icon-button> I have the correct icon, but unfortunately, it's small (around 24px). I tried to specify � Open the SVG icon in the Inkscape Open File > Document Properties and set width and height to your target size Now, select all objects in your icon Adjust the position and size of the object in the

core-icon-button::shadow core-icon {
  height: 48px;
  width: 48px;
}
or
paper-icon-button::shadow core-icon {
  height: 48px;
  width: 48px;
}

Works.

Polymer Iron Icon, Polymer Iron Icon with Installation, Polymer Elements, App Elements, App Paper Elements Paper Material Icon Button Paper Fab Paper Checkbox <style is = "custom-style"> .big {; --iron-icon-height: 20px;; --iron-icon-width: 20px;; }; </ style> You have to import the iron-icons.html file in your index file for default set of� The polymer starter kit makes references to <iron-icon> to implement icons.. For example: <iron-icon icon="home"></iron-icon> I've checked the iron-icons section on the Polymer Catalog website, but the demo which should show all the icons is which is missing.

paper-icon-button demo, Buttons can use iron-icons or external images, and can be disabled. <paper-icon -button icon="favorite" title="heart"></paper-icon-button> <paper-icon-button� If I give paper-icon-button a different size than default one by using --paper-icon-button, for example paper-icon-button { --paper-icon-button: { width: 16px; height: 16px; }; } I would expect iron-icon will change its size as well. But

Responsive app layout, Every application needs some layout, and the app layout elements provide the tools to create responsive <app-toolbar> <paper-icon-button icon="menu"></ paper-icon-button> <div You can designate a sticky toolbar by setting the sticky attribute on it. </app-drawer-layout> <iron-media-query query="min-width: 600px"� Thanks, tried that but the event still does not fire. Mind you even if I make the code '<paper-icon-button icon="search" on-tap="alert('Hi there');"></paper-icon-button>' The alert does not appear either. – Paul S Chapman Jun 17 '15 at 15:43

@polymer/paper-menu-button, paper-menu-button allows one to compose a designated "trigger" element with another element that represents "content", to create a <paper-menu-shrink- width-animation> import '@polymer/paper-icon-button/paper-icon-button.js'; customElements.define('sample-element', SampleElement);� A Material Design icon button. Contribute to PolymerElements/paper-icon-button development by creating an account on GitHub.

Comments

• Thanks for your help. I tried but finally switch to a more 'basic' solution (a simple image). Even if I don't have the 'glossy' touch effect on my image, it's works !
• The correct answer can be found below and should be accepted! Polymer provides mixin to change the button style.
• Were you actually able to get this working? Setting these properties doesn't work for me. For example, I set them both to 100px, but the icon size still ends up being the default of 24px
• @nickjm Absolutely! Otherwise why would I post it (: If you're trying this to work in the "main" html file then please make sure style is annotated with custom-style. That is "<style is="custom-style">...".
• Yep that worked! Is it possible to add the 'is="custom-style"' annotation to a css file (e.g. main.css)?
• @nickjm As a general rule it is recommend to express everything as a custom element (web component) as much as possible where there is no need to use 'is="custom-style"'. Importing CSS files is still experimental in Polymer 1.0.
• Actually, this doesn't work in 1.1. The correct way to do it now is to use the --paper-icon-button mixin and set width and height there (see my answer below).
• We cannot re-use the default icon ? Because iconset is used to build icon from a specific image file. In my case, I want to use default icon (image:photo).