ionic 4 如何动态添加 svg 图标 - {title: 'About', url: '/about' , icon:'person'}

【问题标题】：ionic 4 how to add svg icon dynamically like- {title: 'About', url: '/about' , icon:'person'}ionic 4 如何动态添加 svg 图标 - {title: 'About', url: '/about' , icon:'person'}
【发布时间】：2020-01-08 13:04:21
【问题描述】：

{title: 'About', url: '/about' , icon:'person'} 这样如何添加自定义 svg 图标

{title: 'mobile', url: '/about' , icon:'custom-mobile'}

ion-icon { &[class*="custom-"] { 掩码大小：包含；掩码位置：50% 50%；掩码重复：不重复；背景：当前颜色；宽度：1em；高度：1em； }

&[class*="custom-mobile"] { mask-image: url(../assets/mobile.svg); } } ---也试过了，在 ionic 4 中不起作用---

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

不清楚你在哪里使用它，但 IonIcons 有 documentation about custom icons:

要使用自定义 SVG，请在 src 属性中提供其 url 以请求外部 SVG 文件。 src 属性与 <img src="..."> 的作用相同，因为 URL 必须可以从请求图像的网页访问。此外，外部文件只能是有效的svg，并且不允许在svg 元素中使用脚本或事件。

所以 sn-p 看起来像这样：

<ion-icon src="/path/to/external/file.svg"></ion-icon>

如果你想动态地这样做：

<ion-icon [src]="variablewithimagepath"></ion-icon>

【讨论】：