add back fixed-width icons; fixes #132

docs/docs/components/icon.md

@@ -69,6 +69,19 @@ Icons are sized relative to the current font size. To change their size, set the
 </div>
 ```
 
+### Fixed Width Icons
+
+By default, icons have a 1em height and a variable width. Use the `fixed-width` attribute to render the host element in a 1em by 1em box.
+
+```html {.example}
+<wa-icon fixed-width name="cloud"></wa-icon>
+<wa-icon fixed-width name="user"></wa-icon>
+<wa-icon fixed-width name="truck"></wa-icon>
+<wa-icon fixed-width name="file"></wa-icon>
+<wa-icon fixed-width name="skating"></wa-icon>
+<wa-icon fixed-width name="snowplow"></wa-icon>
+```
+
 ### Labels
 
 For non-decorative icons, use the `label` attribute to announce it to assistive devices.

src/components/icon/icon.styles.ts

@@ -7,15 +7,14 @@ export default css`
     --secondary-color: currentColor;
     --secondary-opacity: 0.4;
 
-    display: inline-block;
+    display: inline-flex;
     box-sizing: content-box !important;
-    width: 1em;
+    width: auto;
     height: 1em;
   }
 
   svg {
     display: inline-block;
-    width: 1em;
     height: 1em;
     fill: currentColor;
 
@@ -29,4 +28,8 @@ export default css`
       opacity: var(--secondary-opacity);
     }
   }
+
+  :host([fixed-width]) {
+    width: 1em;
+  }
 `;

src/components/icon/icon.ts

@@ -65,6 +65,9 @@ export default class WaIcon extends WebAwesomeElement {
    */
   @property({ reflect: true }) variant: string;
 
+  /** Draws the icon in a fixed-width both. */
+  @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
+
   /**
    * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
    * can result in XSS attacks.