title: How to include ag-grid styles for Angular 5?
body: <p>I'm using Angular 5 with ag-grid 17.x and am just trying to do a simple, "hello world"-type example, but having trouble getting the grid to display appropriately.  I have the following HTML in my template:</p>
  
  <pre><code>&lt;div style="width: 800px; height: 500px" class="ag-theme-balham"&gt;
    &lt;ag-grid-angular
                     [rowData]="rowData"
                     [columnDefs]="columnDefs"&gt;
    &lt;/ag-grid-angular&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...and I don't get any errors, but instead of a grid, it's just rendered as one jumbled column of text.</p>
  
  <p>Anyway, I noticed in dev tools that the styles that the grid was pointing to weren't there, so I imported them in the .angular-cli.json:</p>
  
  <pre><code>  "styles": [
      "scss/styles.scss",
      "../node_modules/ag-grid/dist/styles/ag-grid.css",
      "../node_modules/ag-grid/dist/styles/ag-theme-balhom.css"
    ],
  </code></pre>
  
  <p>...and this worked, but the solution doesn't seem right to me.  I tried to import them in one of my .scss files:</p>
  
  <pre><code>@import '~ag-grid/src/styles/ag-grid.scss';
  @import '~ag-grid/src/styles/ag-theme-fresh.scss';
  </code></pre>
  
  <p>...but got a bunch of reference errors (couldn't find icons, etc.). </p>
  
  <p>My question is how should ag-grid styles and themes be imported into an Angular application?  I've dug around in the documentation, but can't seem to find the solution that I stumbled upon, so assume it's wrong...but can't find anything that works either.  Thanks for any help!<img src="https://i.stack.imgur.com/QAvh3.png" alt="enter image description here"></p>