title: How to flip iron-icon vertically in css
body: <p>I'm using <code>iron-icon</code> components for my <code>Polymer 2</code> application, and I want to know how to flip these icons vertically or horizontally? I've tried the <code>transform</code> attribute and equivalent for other browsers, but it didn't work for me. as below:</p>
  
  <pre class="lang-css prettyprint-override"><code>.my-icon-class {
      color: #55555A;
      margin-top: 10px;
      width: 30px;
      height: 50px;
      transform: scale(-1);
  }
  </code></pre>
  
  <p>I've even tried ´filter´ attributte on IE:</p>
  
  <pre class="lang-css prettyprint-override"><code>.my-icon-class {
      color: #55555A;
      margin-top: 10px;
      width: 30px;
      height: 50px;
      filter: FLipH;
  }
  </code></pre>
  
  <p>And my icon instantiation looks like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;iron-icon class="my-icon-class" icon="icons:room"&gt;&lt;/iron-icon&gt;
  </code></pre>
  
  <p>The imports statement goes like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link rel="import" href="../../bower_components/polymer/polymer-element.html"&gt;
  
  &lt;link rel="import" href="../../bower_components/iron-icon/iron-icon.html"&gt;
  &lt;link rel="import" href="../../bower_components/iron-icons/iron-icons.html"&gt;
  </code></pre>
  
  <p>You can find a snippest here below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Load webcomponents.js polyfill if browser doesn't support native Web Components.
  var webComponentsSupported = (
    'registerElement' in document
    &amp;&amp; 'import' in document.createElement('link')
    &amp;&amp; '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);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- &lt;base href="https://gitcdn.xyz/cdn/StartPolymer/cdn/v1.11.0/components/"&gt; --&gt;
  &lt;!-- &lt;base href="https://cdn.rawgit.com/StartPolymer/cdn/v1.11.0/components/"&gt; --&gt;
  &lt;base href="https://rawcdn.githack.com/StartPolymer/cdn/v1.11.0/components/"&gt;
  
  &lt;link rel="import" href="iron-icon/iron-icon.html"&gt;
  &lt;link rel="import" href="iron-icons/iron-icons.html"&gt;
  
  &lt;style is="custom-style"&gt;
  
  body {
    @apply(--layout-vertical);
    @apply(--layout-center-center);
  }
  &lt;/style&gt;
  
  &lt;h1&gt;Polymer Icon to Flip&lt;/h1&gt;
  &lt;p&gt;And I want to flip it vertically and/or horizontally, need only the css. Thanks&lt;/p&gt;
  
  &lt;iron-icon class="my-icon-class" icon="icons:room"&gt;&lt;/iron-icon&gt;
  icon to flip
  
  &lt;script&gt;
  
  window.addEventListener('WebComponentsReady', function() {
    // Async call needed here for IE11 compatibility.
    Polymer.Base.async(function() {
      
    });
  });
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If need more info plz ask in comments.</p>