Ionic-framework: Icon loading with custom icons

[jgw96]

_From @cjorasch on March 29, 2018 22:57_

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[x] feature request

Icon loading:

The current icon loading approach uses async script requests based on icon names but does not allow the developer to add additional icons.

A potential alternate approach would be to have the <ion-icon> element use a property that specifies the svg content of the icon instead of using a name to specify a path to the icon. This would also carry over to other components that generate icons from names (e.g. <ion-tab>).

For example:

// Imported icon
import {checkbox} from '.../svg/ios-checkbox';

// Inline SVG icon
const myIcon = '<svg ... />';

// Render usage
<ion-icon svg={checkbox} />
<ion-icon svg={myIcon} />

Benefits

• Additional icons can be used beyond the ones that are built by ionic. For example, it might be desirable to have a tab component that uses an icon that is not part of the base set of ionicons. Users could leverage third party icon libraries.
• Smaller app size. Most applications use a small number of the icons that are available in ionicons. Currently all icons are loaded into the service worker cache which consumes storage space and bandwidth.
• Reduced network round trips. Chunk files contain icons as they are needed and bundled by usage.
• Leverage existing bundling of imports into chunks.
• Faster rendering with synchronous icons instead of async loading.
• Solves potential asset versioning issues by leveraging chunk versioning. Currently it is not possible to update an icon without invalidating all cache layers or changing the name of the icon.

Potential Issues

• Mode based rendering where different icon is used depending on platform.
• aria-label based on name.

A hybrid approach could be used where either name or svg could be specified. This would enable extensions to the set of icons but would not solve some the issues related to total size of icons.

_Copied from original issue: ionic-team/stencil#682_

[jgw96]

Hey! Thanks for opening an issue with us. Since this is a feature request for the ion-icon element I am going to move this issue to the ionic repo.

[mburger81]

This is a feature request, asked by many persons over a long time! I think now it is the right time to add this with new ionic4 and svg support

[brandyscarney]

Thanks for the issue! This is now possible with the latest ionicons: https://ionicons.com/usage/

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.