How to flip iron-icon vertically in css

Question

I'm using iron-icon components for my Polymer 2 application, and I want to know how to flip these icons vertically or horizontally? I've tried the transform attribute and equivalent for other browsers, but it didn't work for me. as below:

.my-icon-class {
    color: #55555A;
    margin-top: 10px;
    width: 30px;
    height: 50px;
    transform: scale(-1);
}

I've even tried ´filter´ attributte on IE:

.my-icon-class {
    color: #55555A;
    margin-top: 10px;
    width: 30px;
    height: 50px;
    filter: FLipH;
}

And my icon instantiation looks like:

<iron-icon class="my-icon-class" icon="icons:room"></iron-icon>

The imports statement goes like this:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

You can find a snippest here below:

// Load webcomponents.js polyfill if browser doesn't support native Web Components.
var webComponentsSupported = (
  'registerElement' in document
  && 'import' in document.createElement('link')
  && 'content' in document.createElement('template')
);

if (webComponentsSupported) {
 // For native Imports, manually fire WebComponentsReady so user code
  // can use the same code path for native and polyfill'd imports.
  if (!window.HTMLImports) {
    document.dispatchEvent(
      new CustomEvent('WebComponentsReady', {bubbles: true})
    );
  }
} else {
 // Load webcomponents.js polyfill
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js';
  document.head.appendChild(script);
}

h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  margin: 24px 0;
}

.my-icon-class {
  color: #55555A;
  margin-top: 10px;
  width: 50px;
  height: 70px;
}

<!-- <base href="https://gitcdn.xyz/cdn/StartPolymer/cdn/v1.11.0/components/"> -->
<!-- <base href="https://cdn.rawgit.com/StartPolymer/cdn/v1.11.0/components/"> -->
<base href="https://rawcdn.githack.com/StartPolymer/cdn/v1.11.0/components/">

<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">

<style is="custom-style">

body {
  @apply(--layout-vertical);
  @apply(--layout-center-center);
}
</style>

<h1>Polymer Icon to Flip</h1>
<p>And I want to flip it vertically and/or horizontally, need only the css. Thanks</p>

<iron-icon class="my-icon-class" icon="icons:room"></iron-icon>
icon to flip

<script>

window.addEventListener('WebComponentsReady', function() {
  // Async call needed here for IE11 compatibility.
  Polymer.Base.async(function() {
    
  });
});

</script>

If need more info plz ask in comments.

Can you please provide an working snippet or fiddle to give you better result — Sethuraman, Jan 17 '19 at 16:24

score 2 · Accepted Answer · answered Jan 17 '19 at 17:16

2

I found a solution by using:

.my-class {
    transform: rotate(180deg);
}

answered Jan 17 '19 at 17:16

getName

693
1
9
19

score -2 · Answer 2 · answered Jan 17 '19 at 17:08

Hi please have a look in updated snippet.

// Load webcomponents.js polyfill if browser doesn't support native Web Components.
var webComponentsSupported = (
  'registerElement' in document
  && 'import' in document.createElement('link')
  && 'content' in document.createElement('template')
);

if (webComponentsSupported) {
 // For native Imports, manually fire WebComponentsReady so user code
  // can use the same code path for native and polyfill'd imports.
  if (!window.HTMLImports) {
    document.dispatchEvent(
      new CustomEvent('WebComponentsReady', {bubbles: true})
    );
  }
} else {
 // Load webcomponents.js polyfill
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://cdn.rawgit.com/StartPolymer/cdn/1.8.1/components/webcomponentsjs/webcomponents-lite.min.js';
  document.head.appendChild(script);
}

h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  margin: 24px 0;
}

.my-icon-class {
  color: #55555A;
  margin-top: 10px;
  width: 50px;
  height: 70px;
  transform: rotateX(180deg);
}
.my-icon-class:hover {
  transform: rotateY(180deg);
}

<!-- <base href="https://gitcdn.xyz/cdn/StartPolymer/cdn/v1.11.0/components/"> -->
<!-- <base href="https://cdn.rawgit.com/StartPolymer/cdn/v1.11.0/components/"> -->
<base href="https://rawcdn.githack.com/StartPolymer/cdn/v1.11.0/components/">

<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">

<style is="custom-style">

body {
  @apply(--layout-vertical);
  @apply(--layout-center-center);
}
</style>

<h1>Polymer Icon to Flip</h1>
<p>And I want to flip it vertically and/or horizontally, need only the css. Thanks</p>

<iron-icon class="my-icon-class" icon="icons:room"></iron-icon>
icon to flip

<script>

window.addEventListener('WebComponentsReady', function() {
  // Async call needed here for IE11 compatibility.
  Polymer.Base.async(function() {
    
  });
});

</script>

instead of just replicating a code dump you might **explain** the difference since it's just one line of additional CSS. — Paulie_D, Jan 17 '19 at 17:09
I have used transform - rotate Property in css which use to rotate the element used in selector. What you have used is to increase/decrease the width or height ie scale — Sethuraman, Jan 17 '19 at 17:12
It's working on the fiddle but not on my application, but I found a solution, just use `transform: rotate(180deg)` for flip vertically or `transform: rotate(90deg)` for horizontally instead of `rotateX()` and `rotateY()`. — getName, Jan 17 '19 at 17:15

How to flip iron-icon vertically in css

2 Answers2