Skip to content

feat(angular): add enhanced icon support with addIcons #28009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
liamdebeasi merged 12 commits into from
Aug 22, 2023
Merged

feat(angular): add enhanced icon support with addIcons #28009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4d11d01
chore(angular): generate standalone component wrappers
sean-perkins Aug 10, 2023
155cbc6
chore: manually generate ion-icon standalone proxy
sean-perkins Aug 10, 2023
71e8770
chore: prettier
sean-perkins Aug 10, 2023
5b1c9c6
chore: use v0.8.0
sean-perkins Aug 14, 2023
8e354d1
chore: manually wrap back button and nav
sean-perkins Aug 16, 2023
b3ecc3c
test(angular): render ion-app, dedicated button path
sean-perkins Aug 17, 2023
28f2793
test(angular): add icon tests
liamdebeasi Aug 17, 2023
b5a21d2
use addIcons
liamdebeasi Aug 17, 2023
68f1277
use simplified icon syntax
liamdebeasi Aug 21, 2023
3560f81
use temp dev build
liamdebeasi Aug 21, 2023
fef6475
temp re-add package lock
liamdebeasi Aug 21, 2023
1270390
sync
liamdebeasi Aug 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 28 additions & 7 deletions packages/angular/test/apps/ng14/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/angular/test/apps/ng14/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@ionic/angular-server": "^6.1.15",
"core-js": "^2.6.11",
"express": "^4.15.2",
"ionicons": "^6.0.4",
"ionicons": "7.1.3-dev.11692630068.1f5f09ee",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"typescript-eslint-language-service": "^4.1.5",
Expand Down
35 changes: 28 additions & 7 deletions packages/angular/test/apps/ng15/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/angular/test/apps/ng15/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"@nguniversal/express-engine": "^15.0.0",
"core-js": "^2.6.11",
"express": "^4.15.2",
"ionicons": "^6.0.4",
"ionicons": "7.1.3-dev.11692630068.1f5f09ee",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"typescript-eslint-language-service": "^4.1.5",
Expand Down
67 changes: 60 additions & 7 deletions packages/angular/test/apps/ng16/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/angular/test/apps/ng16/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@nguniversal/express-engine": "^16.0.0",
"core-js": "^2.6.11",
"express": "^4.15.2",
"ionicons": "^7.0.4",
"ionicons": "7.1.3-dev.11692630068.1f5f09ee",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"typescript-eslint-language-service": "^4.1.5",
Expand Down
20 changes: 20 additions & 0 deletions packages/angular/test/base/e2e/src/standalone/icon.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
describe('Icons', () => {
it('should render an icon', () => {
cy.visit('/standalone/icon');

cy.get('ion-icon#icon-string').shadow().find('svg').should('exist');
cy.get('ion-icon#icon-binding').shadow().find('svg').should('exist');
});

it('should render an icon on iOS mode', () => {
cy.visit('/standalone/icon?ionic:mode=ios');

cy.get('ion-icon#icon-mode').shadow().find('svg').should('exist');
});

it('should render an icon on MD mode', () => {
cy.visit('/standalone/icon?ionic:mode=md');

cy.get('ion-icon#icon-mode').shadow().find('svg').should('exist');
});
});
3 changes: 2 additions & 1 deletion packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ export const routes: Routes = [
{ path: 'nav', loadComponent: () => import('../nav/nav.component').then(c => c.NavComponent) },
{ path: 'providers', loadComponent: () => import('../providers/providers.component').then(c => c.ProvidersComponent) },
{ path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(c => c.OverlayControllersComponent) },
{ path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) }
{ path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) },
{ path: 'icon', loadComponent: () => import('../icon/icon.component').then(c => c.IconComponent) },
]
},
];
6 changes: 6 additions & 0 deletions packages/angular/test/base/src/app/standalone/icon/icon.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div>
Icon Name: <ion-icon id="icon-string" name="logo-ionic"></ion-icon><br />
Icon Name Binding: <ion-icon id="icon-binding" [name]="iconName"></ion-icon> <button id="change-icon" (click)="changeIcon()">Change Icon Binding</button><br />
iOS/MD: <ion-icon id="icon-mode" ios="logo-apple" md="logo-android"></ion-icon><br />
iOS/MD Binding: <ion-icon id="icon-mode-binding" [ios]="iosIcon" [md]="mdIcon"></ion-icon> <button id="change-mode-icon" (click)="changeModeIcon()">Change Icon Binding</button><br />
</div>
27 changes: 27 additions & 0 deletions packages/angular/test/base/src/app/standalone/icon/icon.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Component } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import { logoIonic, logoIonitron, logoApple, logoAndroid } from 'ionicons/icons';
import { addIcons } from 'ionicons';

addIcons({ logoIonic, logoIonitron, logoApple, logoAndroid });

@sean-perkins sean-perkins Aug 21, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Played with this locally, everything looks/works good 👍

It seems to work consistently if you have this outside the class or within the constructor. Does not work (too late in the execution cycle, after connectedCallback fires) if you try to add icons in the ngOnInit lifecycle.

@liamdebeasi liamdebeasi Aug 21, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! We'll want to note this in the docs


@Component({
selector: 'app-icon',
templateUrl: './icon.component.html',
standalone: true,
imports: [IonIcon],
})
export class IconComponent {
iconName: string = 'logo-ionic';
iosIcon: string = 'logo-apple';
mdIcon: string = 'logo-android';

changeIcon() {
this.iconName = this.iconName === 'logo-ionic' ? 'logo-apple' : 'logo-ionic';
}

changeModeIcon() {
this.iosIcon = this.iosIcon === 'logo-apple' ? 'logo-ionic' : 'logo-apple';
this.mdIcon = this.mdIcon === 'logo-android' ? 'logo-ionitron' : 'logo-android';
}
}