remove fixed width

docs/docs/components/icon.md

@@ -69,19 +69,6 @@ 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

@@ -9,10 +9,14 @@ export default css`
 
     display: inline-block;
     box-sizing: content-box !important;
+    width: 1em;
+    height: 1em;
   }
 
   svg {
-    display: block;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
     fill: currentColor;
 
     .fa-primary {
@@ -25,26 +29,4 @@ export default css`
       opacity: var(--secondary-opacity);
     }
   }
-
-  /* Normal width */
-  :host(:not([fixed-width])) {
-    max-width: auto;
-    height: 1em;
-
-    svg {
-      width: auto;
-      height: 1em;
-    }
-  }
-
-  /* Fixed width */
-  :host([fixed-width]) {
-    width: 1em;
-    height: 1em;
-
-    svg {
-      width: 1em;
-      height: 1em;
-    }
-  }
 `;

src/components/icon/icon.ts

@@ -65,9 +65,6 @@ 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.