我正在使用Ionic 2来开发我的App。我想在我的应用中使用自定义图标，就像我们使用 标记使用离子2图标一样。例如：
title Insights into the relationship between the
blivious RAM with O((log N)
我怎样才能做到这一点？有没有推荐的方法呢？
答案 0 :(得分：68)
如果您想在离子2+中使用自定义字体，可以使用以下内容进行操作。
步骤01：
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
将以上代码替换为：
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
@extend .ion;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
第2步：
@mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
content: $val;
font-size: 26px;
}
}
我们可以在我们的sass文件中使用我们的sass混音，如：
@include makeIcon(icon-new-home, '\e911')
第03步
像
一样使用它<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
</ion-tabs>
它甚至支持android涟漪效果，有点看起来很酷
@ionic/app-scripts : 3.1.2
Ionic Framework : ionic-angular 3.9.2
对于Ionic 3.1.2
您需要在@import "ionicons";文件中添加/src/theme/variables.scss，以便修复以下错误
"[class^="icon-"]" failed to @extend ".ion". The selector ".ion" was not found. Use "@extend .ion !optional"
if the extend should be able to fail.
答案 1 :(得分：68)
这是我在https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36的论坛中找到的最简单方法。
在 app.scss 文件中，添加以下代码：
ion-icon {
&[class*="appname-"] {
// Instead of using the font-based icons
// We're applying SVG masks
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
// custom icons
&[class*="appname-customicon1"] {
mask-image: url(../assets/img/customicon1.svg);
}
&[class*="appname-customicon2"] {
mask-image: url(../assets/img/customicon2.svg);
}
&[class*="appname-customicon3"] {
mask-image: url(../assets/img/customicon3.svg);
}
}
然后在模板中，您可以使用以下HTML来创建图标：
<ion-icon name="appname-customicon"></ion-icon>
这远比使用基于字体的方法复杂。只要您不添加数百个图标，您就可以使用此方法。但是，每个图像都作为单独的请求发送，与字体方法一样，所有图像都包含在一个文件中，因此效率会更高。
答案 2 :(得分：9)
使用当前的Ionic 3.3.0，您可以使用Anjum的解决方案，但您必须更改
@import "ionic.ionicons";
到
@import "ionicons";
在src / theme / variables.scss文件中。
在以下位置找到此解决方案：
https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss
答案 3 :(得分：6)
尝试使用icomoon的图标sass表格实现Anjum Nawab shaikh answer。
我能够使用2.2.2版本。
在项目的 www / fonts 中，我添加了icomoon文件：
icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss
在icomoon.scss中我添加了以下scss：
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tclihz');
src: url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tclihz') format('truetype'),
url('../fonts/icomoon.woff?tclihz') format('woff'),
url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
/* Didn't feel the need to @extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in
www/assets/fonts/ionicons.scss */
font-family: "Ionicons", "icomoon" !important; //So just add this
}
//Mixin
@mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
//important to overwrite ionic icons with your own icons
content: $val !important;
font-size: 26px;
}
}
//Adding Icons
@include makeIcon(email, '\e900');
...
然后我对variables.scss
进行了导入@import "../www/fonts/icomoon";
现在我们可以将它添加到html模板中：
<ion-icon name="email"></ion-icon>
答案 4 :(得分：4)
开始之前：确保您拥有所需的每个svg文件。
现在就去：http://fontello.com/
该工具将生成您的图标字体和所需的CSS。它非常直观，只需在www文件夹中的任何地方使用，下载和复制字体，但保持相同的文件结构。要完成，只需将CSS文件集成到index.html文件中即可完成！
我希望它能解决你的问题！ ; - ）
答案 5 :(得分：4)
根据离子团队的说法：
嘿那里！ 现在它仅限于使用离子，因为它下面会呈现一个离子图标，这就是处理平台的差异。您可以打开一个问题，我们可以讨论在那里添加此功能
您可以在此处查看所有答案：
https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16
我也发现了这个：
https://www.npmjs.com/package/ionic2-custom-icons，
但似乎不是一个聪明的解决方案（我更愿意等待Ionic团队的解决方案）。
最好的方案是使用旧方法，在scss文件上创建一个类。
答案 6 :(得分：3)
添加我在scss文件中使用的自定义图标：
.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
@extend .ion;
}
.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
content: 'your-custom-image';
}
然后在您的HTML代码中：
<ion-icon name="MYICON"></ion-icon>
答案 7 :(得分：1)
我认为GerritErpenstein的这个步骤非常直观，对我来说非常有用。我的Ionic版本是2.2.2。从字面上看，你使用这样的句子并完成它：
<custom-icon set="star" name="iconostar"></custom-icon>
答案 8 :(得分：0)
Create Icon
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 0.8em;
height: 0.8em;
}
&[class*="custom-rupee"] {
color: yellow;
mask-image: url(../../assets/Images/rupee.svg);
}
&[class*="custom-ballon"] {
mask-image: url(../../assets/ballon.svg);
}
&[class*="custom-mouse"] {
mask-image: url(../../assets/mouse.svg);
}
}
And to use them
<ion-icon name="custom-rupee"></ion-icon>
<ion-icon name="custom-mouse"></ion-icon>
<ion-icon name="custom-ballon"></ion-icon>
答案 9 :(得分：0)
如果离子方式对您不起作用，则可以使用角度方式。使用以下软件包：https://www.npmjs.com/package/angular-svg-icon。
离子使用的样品代码：
<svg-icon src="/assets/icons/activity.svg"></svg-icon>
答案 10 :(得分：0)
以下是使用 ion-icon 显示外部 svg 图标的推荐方式：
<块引用>要使用自定义 SVG，请在 src 属性中提供其 url 以请求外部 SVG 文件。 src 属性的工作原理与 URL 必须可从发出图像请求的网页访问相同。此外，外部文件只能是有效的 svg，并且不允许在 svg 元素中包含脚本或事件。
<ion-icon src="assets/icons/custom_icon.svg"></ion-icon>