diff --git a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md index c2fec94b65b..d2ef8d59a23 100644 --- a/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md +++ b/static/usage/v7/theming/automatic-dark-mode/angular/example_component_ts.md @@ -1,11 +1,23 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', }) export class ExampleComponent implements OnInit { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } + ngOnInit() { // Use matchMedia to check the user preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); diff --git a/static/usage/v7/theming/automatic-dark-mode/index.md b/static/usage/v7/theming/automatic-dark-mode/index.md index 6e6b490de6f..9b6f462f55e 100644 --- a/static/usage/v7/theming/automatic-dark-mode/index.md +++ b/static/usage/v7/theming/automatic-dark-mode/index.md @@ -1,6 +1,7 @@ import Playground from '@site/src/components/global/Playground'; -import javascript_index_html from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react_main_tsx from './react/main_tsx.md'; import react_main_css from './react/main_css.md'; @@ -19,8 +20,12 @@ import variables_css from './theme/variables_css.md'; javascript: { files: { 'index.html': javascript_index_html, + 'index.ts': javascript_index_ts, 'theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -42,6 +47,9 @@ import variables_css from './theme/variables_css.md'; 'src/global.css': angular_global_css, 'src/theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v7/theming/automatic-dark-mode/demo.html" diff --git a/static/usage/v7/theming/automatic-dark-mode/javascript.md b/static/usage/v7/theming/automatic-dark-mode/javascript/index_html.md similarity index 100% rename from static/usage/v7/theming/automatic-dark-mode/javascript.md rename to static/usage/v7/theming/automatic-dark-mode/javascript/index_html.md diff --git a/static/usage/v7/theming/automatic-dark-mode/javascript/index_ts.md b/static/usage/v7/theming/automatic-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..7bc6cc83d44 --- /dev/null +++ b/static/usage/v7/theming/automatic-dark-mode/javascript/index_ts.md @@ -0,0 +1,36 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md index ad697b08012..ccf31cc2cd3 100644 --- a/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md +++ b/static/usage/v7/theming/manual-dark-mode/angular/example_component_ts.md @@ -1,6 +1,9 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', @@ -8,6 +11,15 @@ import { Component, OnInit } from '@angular/core'; export class ExampleComponent implements OnInit { themeToggle = false; + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } + ngOnInit() { // Use matchMedia to check the user preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); diff --git a/static/usage/v7/theming/manual-dark-mode/index.md b/static/usage/v7/theming/manual-dark-mode/index.md index 2022b7e8952..8033498d0d0 100644 --- a/static/usage/v7/theming/manual-dark-mode/index.md +++ b/static/usage/v7/theming/manual-dark-mode/index.md @@ -1,6 +1,7 @@ import Playground from '@site/src/components/global/Playground'; -import javascript_index_html from './javascript.md'; +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; import react_main_tsx from './react/main_tsx.md'; import react_main_css from './react/main_css.md'; @@ -19,8 +20,12 @@ import variables_css from './theme/variables_css.md'; javascript: { files: { 'index.html': javascript_index_html, + 'index.ts': javascript_index_ts, 'theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -42,6 +47,9 @@ import variables_css from './theme/variables_css.md'; 'src/global.css': angular_global_css, 'src/theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v7/theming/manual-dark-mode/demo.html" diff --git a/static/usage/v7/theming/manual-dark-mode/javascript.md b/static/usage/v7/theming/manual-dark-mode/javascript/index_html.md similarity index 100% rename from static/usage/v7/theming/manual-dark-mode/javascript.md rename to static/usage/v7/theming/manual-dark-mode/javascript/index_html.md diff --git a/static/usage/v7/theming/manual-dark-mode/javascript/index_ts.md b/static/usage/v7/theming/manual-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..7bc6cc83d44 --- /dev/null +++ b/static/usage/v7/theming/manual-dark-mode/javascript/index_ts.md @@ -0,0 +1,36 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..25b522af5b2 --- /dev/null +++ b/static/usage/v8/theming/always-dark-mode/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v8/theming/always-dark-mode/index.md b/static/usage/v8/theming/always-dark-mode/index.md index 18c585f986f..6c65dc611bb 100644 --- a/static/usage/v8/theming/always-dark-mode/index.md +++ b/static/usage/v8/theming/always-dark-mode/index.md @@ -7,6 +7,7 @@ import react_app_tsx from './react/app_tsx.md'; import react_main_tsx from './react/main_tsx.md'; import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; import angular_styles_css from './angular/styles_css.md'; import vue_example from './vue/example_vue.md'; @@ -23,6 +24,9 @@ import variables_css from './theme/variables_css.md'; 'index.ts': javascript_index_ts, 'theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -41,9 +45,13 @@ import variables_css from './theme/variables_css.md'; angular: { files: { 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, 'src/styles.css': angular_styles_css, 'src/theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v8/theming/always-dark-mode/demo.html" diff --git a/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md b/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md index bbca989d7af..2fd7ff17d24 100644 --- a/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/always-dark-mode/javascript/index_ts.md @@ -1,6 +1,9 @@ ```ts import { defineCustomElements } from '@ionic/core/loader'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -31,5 +34,14 @@ import '@ionic/core/css/palettes/dark.always.css'; /* Theme variables */ import './theme/variables.css'; +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + defineCustomElements(); ``` diff --git a/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..25b522af5b2 --- /dev/null +++ b/static/usage/v8/theming/always-high-contrast-mode/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v8/theming/always-high-contrast-mode/index.md b/static/usage/v8/theming/always-high-contrast-mode/index.md index c418c914696..81e6d2bfc90 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/index.md +++ b/static/usage/v8/theming/always-high-contrast-mode/index.md @@ -7,6 +7,7 @@ import react_app_tsx from './react/app_tsx.md'; import react_main_tsx from './react/main_tsx.md'; import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; import angular_styles_css from './angular/styles_css.md'; import vue_example from './vue/example_vue.md'; @@ -20,6 +21,9 @@ import vue_main_ts from './vue/main_ts.md'; 'index.html': javascript_index_html, 'index.ts': javascript_index_ts, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -36,8 +40,12 @@ import vue_main_ts from './vue/main_ts.md'; angular: { files: { 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, 'src/styles.css': angular_styles_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v8/theming/always-high-contrast-mode/demo.html" diff --git a/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md index b394518f50b..8f41c94bf99 100644 --- a/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/always-high-contrast-mode/javascript/index_ts.md @@ -1,6 +1,9 @@ ```ts import { defineCustomElements } from '@ionic/core/loader'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -26,5 +29,17 @@ import '@ionic/core/css/display.css'; import '@ionic/core/css/palettes/high-contrast.always.css'; +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + defineCustomElements(); ``` diff --git a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md index 3fe6038c370..ed20c4b5d11 100644 --- a/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-dark-mode/angular/example_component_ts.md @@ -1,6 +1,9 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', @@ -8,6 +11,15 @@ import { Component, OnInit } from '@angular/core'; export class ExampleComponent implements OnInit { paletteToggle = false; + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } + ngOnInit() { // Use matchMedia to check the user preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); diff --git a/static/usage/v8/theming/class-dark-mode/index.md b/static/usage/v8/theming/class-dark-mode/index.md index f0fb042f97a..b98861be3c0 100644 --- a/static/usage/v8/theming/class-dark-mode/index.md +++ b/static/usage/v8/theming/class-dark-mode/index.md @@ -26,6 +26,9 @@ import variables_css from './theme/variables_css.md'; 'index.ts': javascript_index_ts, 'theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -50,6 +53,9 @@ import variables_css from './theme/variables_css.md'; 'src/styles.css': angular_styles_css, 'src/theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v8/theming/class-dark-mode/demo.html" diff --git a/static/usage/v8/theming/class-dark-mode/javascript/index_ts.md b/static/usage/v8/theming/class-dark-mode/javascript/index_ts.md index b497f4aa542..84dabd234f7 100644 --- a/static/usage/v8/theming/class-dark-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/class-dark-mode/javascript/index_ts.md @@ -1,6 +1,9 @@ ```ts import { defineCustomElements } from '@ionic/core/loader'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -31,5 +34,14 @@ import '@ionic/core/css/palettes/dark.class.css'; /* Theme variables */ import './theme/variables.css'; +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + defineCustomElements(); ``` diff --git a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md index cb6b1686c3c..ebcbdbcb476 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md +++ b/static/usage/v8/theming/class-high-contrast-mode/angular/example_component_ts.md @@ -1,6 +1,9 @@ ```ts import { Component, OnInit } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + @Component({ selector: 'app-example', templateUrl: 'example.component.html', @@ -9,6 +12,15 @@ export class ExampleComponent implements OnInit { darkPaletteToggle = false; highContrastPaletteToggle = false; + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } + ngOnInit() { // Use matchMedia to check the user preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); diff --git a/static/usage/v8/theming/class-high-contrast-mode/index.md b/static/usage/v8/theming/class-high-contrast-mode/index.md index 21da1d4301f..89af5c727b3 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/index.md +++ b/static/usage/v8/theming/class-high-contrast-mode/index.md @@ -23,6 +23,9 @@ import vue_main_ts from './vue/main_ts.md'; 'index.html': javascript_index_html, 'index.ts': javascript_index_ts, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -44,6 +47,9 @@ import vue_main_ts from './vue/main_ts.md'; 'src/global.css': angular_global_css, 'src/styles.css': angular_styles_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v8/theming/class-high-contrast-mode/demo.html" diff --git a/static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md index 265fd836d3a..42ad5bdbd9a 100644 --- a/static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_ts.md @@ -1,6 +1,9 @@ ```ts import { defineCustomElements } from '@ionic/core/loader'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -29,5 +32,17 @@ import '@ionic/core/css/palettes/dark.class.css'; import '@ionic/core/css/palettes/high-contrast.class.css'; import '@ionic/core/css/palettes/high-contrast-dark.class.css'; +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + defineCustomElements(); ``` diff --git a/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..25b522af5b2 --- /dev/null +++ b/static/usage/v8/theming/system-dark-mode/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v8/theming/system-dark-mode/index.md b/static/usage/v8/theming/system-dark-mode/index.md index 0ba01ef41e2..c29b3f8de57 100644 --- a/static/usage/v8/theming/system-dark-mode/index.md +++ b/static/usage/v8/theming/system-dark-mode/index.md @@ -8,6 +8,7 @@ import react_main_tsx from './react/main_tsx.md'; import react_main_css from './react/main_css.md'; import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; import angular_global_css from './angular/global_css.md'; import angular_styles_css from './angular/styles_css.md'; @@ -25,6 +26,9 @@ import variables_css from './theme/variables_css.md'; 'index.ts': javascript_index_ts, 'theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -44,10 +48,14 @@ import variables_css from './theme/variables_css.md'; angular: { files: { 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, 'src/global.css': angular_global_css, 'src/styles.css': angular_styles_css, 'src/theme/variables.css': variables_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v8/theming/system-dark-mode/demo.html" diff --git a/static/usage/v8/theming/system-dark-mode/javascript/index_ts.md b/static/usage/v8/theming/system-dark-mode/javascript/index_ts.md index eeac5ad63aa..9afb89215c3 100644 --- a/static/usage/v8/theming/system-dark-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/system-dark-mode/javascript/index_ts.md @@ -1,6 +1,9 @@ ```ts import { defineCustomElements } from '@ionic/core/loader'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -31,5 +34,14 @@ import '@ionic/core/css/palettes/dark.system.css'; /* Theme variables */ import './theme/variables.css'; +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + defineCustomElements(); ``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..25b522af5b2 --- /dev/null +++ b/static/usage/v8/theming/system-high-contrast-mode/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v8/theming/system-high-contrast-mode/index.md b/static/usage/v8/theming/system-high-contrast-mode/index.md index 88179ede2d8..d792eb26327 100644 --- a/static/usage/v8/theming/system-high-contrast-mode/index.md +++ b/static/usage/v8/theming/system-high-contrast-mode/index.md @@ -7,6 +7,7 @@ import react_app_tsx from './react/app_tsx.md'; import react_main_tsx from './react/main_tsx.md'; import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; import angular_styles_css from './angular/styles_css.md'; import vue_example from './vue/example_vue.md'; @@ -20,6 +21,9 @@ import vue_main_ts from './vue/main_ts.md'; 'index.html': javascript_index_html, 'index.ts': javascript_index_ts, }, + dependencies: { + ionicons: '7.4.0', + }, }, react: { files: { @@ -36,8 +40,12 @@ import vue_main_ts from './vue/main_ts.md'; angular: { files: { 'src/app/example.component.html': angular_example_component_html, + 'src/app/example.component.ts': angular_example_component_ts, 'src/styles.css': angular_styles_css, }, + dependencies: { + ionicons: '7.4.0', + }, }, }} src="usage/v8/theming/system-high-contrast-mode/demo.html" diff --git a/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md index 75e6810c41e..c972f09c334 100644 --- a/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md +++ b/static/usage/v8/theming/system-high-contrast-mode/javascript/index_ts.md @@ -1,6 +1,9 @@ ```ts import { defineCustomElements } from '@ionic/core/loader'; +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -29,5 +32,17 @@ import '@ionic/core/css/palettes/dark.system.css'; import '@ionic/core/css/palettes/high-contrast.system.css'; import '@ionic/core/css/palettes/high-contrast-dark.system.css'; +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + defineCustomElements(); ```