观察默认的使用

关于Ion-icon 图标的自定义，首先，看一看默认内置的图标的显示，是怎么来的

可以看到默认的路径为：/svg/ios-xxx.svg

自定义实现

那么这种路径是哪里来的，明显是angluar的路由解析过来的，所以，在根目录的anguluar.json中去找相应的配置

可以看到，这个/svg的路径就是这里配置的，那么，添加自定的icon访问，就顺理成章了

我们首先添加一个自定义的配置

{
"glob": "**/*.svg",
"input": "src/assets/svg",
"output": "./svg"
}
即默认找不到的时候，在我们添加的这里面去找，就是命名的格式
 

图标的命名

这里的命名要跟默认的一样：
将svg放入src/assets/svg 中
 

注意事项

注意1：svg文件的名字叫ios-xxx.svg和md-xxx.svg
注意2：图标在tab使用时outline时需要变暗，svg的名字命名为xxx-outline.svg 而不是ios-xxx-outline.svg或md-xxx-outline.svg
 

ion-icon的更多相关文章

  1. Android studio使用gradle动态构建APP(不同的包,不同的icon、label)

    最近有个需求,需要做两个功能相似的APP,大部分代码是一样的,只是界面不一样,以前要维护两套代码,比较麻烦,最近在网上找资料,发现可以用gradle使用同一套代码构建两个APP.下面介绍使用方法: 首 ...

  2. h5应用缓存及收藏时Icon显示

    h5应用实现离线缓存,加载后,断网仍然可以继续使用. 一.需求 转行做h5,目前做赛道游戏,动手做了个赛道编辑器web版的,由于web版需要开启服务器才能使用,策划要想回家使用就要发布到外网服务器了, ...

  3. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  4. 【C#】无损转换Image为Icon

    如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle); //通过句柄得到图标 此法的问题 ...

  5. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  6. [No0000AF]去除wpf窗口标题栏ICON

    /* #region 去除标题栏ICON [DllImport("user32.dll")] static extern int GetWindowLong(IntPtr hwnd ...

  7. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  8. Cordova应用程序修改启动画面或者Icon

    1)  制作启动画面图片或icon ionic resources //同时生成icon和splash ionic resources --icon //只生成icon ionic resources ...

  9. 标题栏显示icon

    <link rel="shortcut icon" href="/favicon2.ico"/><link rel="bookmar ...

  10. iPhone屏幕尺寸/launch尺寸/icon尺寸

    屏幕尺寸 6p/6sp     414 X 736 6/6s         375 X 667 5/5s         320 X 568  4/4s         320 X 480   la ...

随机推荐

  1. EasyUI中对于Grid的隐藏与显示

    $('#div_Grid').datagrid('hideColumn', 'mtnDate'); $('#div_Grid').datagrid('showColumn', 'mtnDate');

  2. redis的incr和incrby命令

    Redis Incr 命令将 key 中储存的数字值增一,如果 key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 INCR 操作. Redis Incrby 命令将 key 中储存的 ...

  3. GIS面积计算问题

    好长时间不更新了,今天说点干货,项目用到的. 1.项目中要用到计算面积的,根据火星坐标: 2.百度找了各种面积计算,google了半天,也没发现那个比较准确: 直接说干货吧.咱也高大上一会,用 Arc ...

  4. SQLite 使用主键，ROWID 及自增列

    SQLite 使用主键,ROWID 及自增列 之前关注过一些嵌入式数据库,倒时 SQLite 风头更劲,在 Android 上被应用,在 HTML5 中一些浏览器的 Local Database 的实 ...

  5. 移动App双周版本迭代策略

    对于移动互联网产品来说,迭代的速度就是生命.我创业时做移动App时是一周一版,而现在是2周1版.相比起小公司,大公司迭代时间虽长,却更为不易,因为大公司流程更多,参与人数更多,需求更多,实现这样的快速 ...

  6. 剑指XX游戏(六) - 轻松搞定面试中的红黑树问题

    原文地址 http://blog.csdn.net/silangquan/article/details/18655795?utm_source=tuicool&utm_medium=refe ...

  7. JavaScript this的使用

    当作用域不同时,我们可以将this暂时性的保存下来. 例如: _this =  this.

  8. js 中实现 汉字按拼音排序

    let arr = ["贵州省", "江苏省", "江西省", "浙江省", "四川省", &quo ...

  9. 阶段3 3.SpringMVC·_07.SSM整合案例_07.ssm整合之编写MyBatis框架测试保存的方法

    再写一个测试的方法,测试save保存的方法 需要提交事务才能保存到数据库

  10. 在单元测试中处理Debug.Assert的好方法

    在单元测试项目的配置文件中配置好, <?xml version="1.0" encoding="utf-8"?> <configuration ...