Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all.

Ionic Framework CDN

Ionic Framework can be included from a CDN for quick testing in a Plunker, Codepen, or any other online code editor!

It's recommended to use unpkg to access the Framework from a CDN. To get the latest version, add the following inside the <head> element in an HTML file, or where external assets are included in the online code editor:

  1. <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
  2. <link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet">


With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic Global Stylesheets.

This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework.

Angular + Ionic Framework

When using Ionic Framework in an Angular project, install the latest @ionic/angular package from npm. This comes with all of the Ionic Framework components and Angular specific services and features.

  1. $ npm install @ionic/[email protected] --save


Each time there is a new Ionic Framework release, this version will need to be updated to get the latest features and fixes. The version can be updated using npm, as well.

CSS

Create a global stylesheet file and add it to the styles object in the Angular workspace config. Add the following imports to that file:

  1. /* Core CSS required for Ionic components to work properly */
  2. @import "[email protected]/angular/css/core.css";
  4. /* Basic CSS for apps built with Ionic */
  5. @import "[email protected]/angular/css/normalize.css";
  6. @import "[email protected]/angular/css/structure.css";
  7. @import "[email protected]/angular/css/typography.css";
  9. /* Optional CSS utils that can be commented out */
  10. @import "[email protected]/angular/css/padding.css";
  11. @import "[email protected]/angular/css/float-elements.css";
  12. @import "[email protected]/angular/css/text-alignment.css";
  13. @import "[email protected]/angular/css/text-transformation.css";
  14. @import "[email protected]/angular/css/flex-utils.css";
  15. @import "[email protected]/angular/css/display.css";


See Global Stylesheets for the styles that each of these files contain.

Stencil + Ionic Framework

When using Ionic Framework in a Stencil project, install the latest @ionic/core package from npm. This comes with all of the Ionic Framework components.

  1. $ npm install @ionic/[email protected] --save

JS

Include an import of @ionic/core in the root app file:

  1. import '@ionic/core';

CSS

Create a global stylesheet file and add it to the config object in the Stencil Config.

  1. exports.config = {
  2.   // ...
  4.   globalStyle: 'src/global.css'
  6.   // ...
  7. };


Add the following imports to that file:

  1. /* Core CSS required for Ionic components to work properly */
  2. @import "[email protected]/core/css/core.css";
  4. /* Basic CSS for apps built with Ionic */
  5. @import "[email protected]/core/css/normalize.css";
  6. @import "[email protected]/core/css/structure.css";
  7. @import "[email protected]/core/css/typography.css";
  9. /* Optional CSS utils that can be commented out */
  10. @import "[email protected]/core/css/padding.css";
  11. @import "[email protected]/core/css/float-elements.css";
  12. @import "[email protected]/core/css/text-alignment.css";
  13. @import "[email protected]/core/css/text-transformation.css";
  14. @import "[email protected]/core/css/flex-utils.css";
  15. @import "[email protected]/core/css/display.css";


See Global Stylesheets for the styles that each of these files contain.

Ionicons CDN

Ionicons is packaged by default with the Ionic Framework, so no installation is necessary if you're using Ionic. To use Ionicons without Ionic Framework, place the following <script> near the end of your page, right before the closing </body> tag.

  1. <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

See Ionicons usage for more information on using Ionicons.