title: PrimeNg Icons Not Showing (Checkbox and Select)
body: <p><a href="https://i.stack.imgur.com/j10Nn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j10Nn.jpg" alt="Checked box and select sans icons."></a>
  <em>Checked box and select sans icons.</em></p>
  
  <p>I've added the primeicons library per:
  <a href="https://github.com/primefaces/primeng/wiki/Migration-Guide" rel="nofollow noreferrer">https://github.com/primefaces/primeng/wiki/Migration-Guide</a></p>
  
  <p>However, something is still a muck, I can't get the icons with show up. </p>
  
  <p><strong>package.json:</strong></p>
  
  <pre><code>...
  "primeicons": "^1.0.0-beta.10",
  "primeng": "6.1.2",
  </code></pre>
  
  <p>also have, not sure if relevant. Doesn't seem like it's overwriting the css but possible</p>
  
  <pre><code>"font-awesome": "4.7.0",
  "@angular/material": "^6.4.7",
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;p-checkbox binary="true" label="Match Note"&gt;&lt;/p-checkbox&gt;
  </code></pre>
  
  <p><strong>html showing icon class - from dev tools:</strong></p>
  
  <pre><code>&lt;span class="ui-chkbox-icon ui-clickable pi pi-check" ng-reflect-klass="ui-chkbox-icon ui-clickable" ng-reflect-ng-class="[object Object]"&gt;&lt;/span&gt;
  </code></pre>
  
  <p><strong>css - from dev tools:</strong></p>
  
  <pre><code>.ui-chkbox .ui-chkbox-icon {
      display: block;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-widget, .ui-widget * {
      box-sizing: border-box;
  }
  &lt;style&gt;…&lt;/style&gt;
  *, *::before, *::after {
      box-sizing: border-box;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-chkbox .ui-chkbox-box {
      width: 1.125em;
      height: 1.125em;
      line-height: 1.125em;
      border-radius: 2px;
      text-align: center;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-chkbox-box.ui-state-active, .ui-radiobutton-box.ui-state-active {
      border: 1px solid #156090;
      background: #186ba0;
      color: #FFFFFF;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-state-active {
      border-color: #bebebe;
      background-color: #d6d6d6;
      color: #212121;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-state-default {
      border: 1px solid #d6d6d6;
      background-color: #ffffff;
      color: #555555;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-widget {
      /* font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; */
      font-size: 1em;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-chkbox {
      display: inline-block;
      cursor: pointer;
      vertical-align: middle;
      margin-right: .25em;
      -ms-user-select: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
  }
  &lt;style&gt;…&lt;/style&gt;
  .ui-widget {
      /* font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif; */
      font-size: 1em;
  }
  &lt;style&gt;…&lt;/style&gt;
  .mat-card {
      background: white;
      color: rgba(0, 0, 0, 0.87);
  }
  &lt;style&gt;…&lt;/style&gt;
  .mat-card {
      /* font-family: Roboto,"Helvetica Neue",sans-serif; */
  }
  Style Attribute {
      visibility: visible;
  }
  &lt;style&gt;…&lt;/style&gt;
  .mat-expansion-panel {
      background: white;
      color: rgba(0, 0, 0, 0.87);
  }
  &lt;style&gt;…&lt;/style&gt;
  .mat-expansion-panel {
      background: #fff;
      color: rgba(0,0,0,.87);
  }
  &lt;style&gt;…&lt;/style&gt;
  body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
  }
  &lt;style&gt;…&lt;/style&gt;
  body {
      margin: 0;
      /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
      i": ;
      */: ;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      background-color: #fff;
  }
  &lt;style&gt;…&lt;/style&gt;
  html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      -ms-overflow-style: scrollbar;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  &lt;style&gt;…&lt;/style&gt;
  body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
  }
  &lt;style&gt;…&lt;/style&gt;
  body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      i": ;
      */i": ;
      */: ;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      background-color: #fff;
  }
  &lt;style&gt;…&lt;/style&gt;
  html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      -ms-overflow-style: scrollbar;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  &lt;style&gt;…&lt;/style&gt;
  body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
  }
  &lt;style&gt;…&lt;/style&gt;
  body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      i": ;
      */: ;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      background-color: #fff;
  }
  </code></pre>