再去定义一个应用图标组件，在项目资源目录的下面，找到 app-icon.css ，复制一下这个样式表里的内容。回到我们的前端项目，在 src/app/components/styles 的下面，新建一个样式表，名字是 app-icon.css ，把复制的内容粘贴到这里。

这里用的是 material design 提供的图标字体，我把这个图标字体文件转换成 base64 编码格式的了。在元素上面添加这个 app-icon ，然后设置一下元素包装的文字，就能得到一个对应的小图标。

新建一个组件文件，放在 src/app/components 的下面，名字是 app-icon.vue，在这个文件里定义一个组件，组件的名字叫 AppIcon 。 在组件的 style 里面，导入一个样式表 @import 位置是当前目录下面的 styles 里的 app-icon.css。

模板

然后处理一下这个组件的模板，这里可以使用一组小 i 元素，元素里面绑定一个数据，名字叫 name，这个 name 应该是这个组件的一个属性。

给元素的 class 属性绑定一个值，设置成 appIconClasses ，再绑定一个 style 属性，设置成 appIconStyles。

属性

下面要声明这个组件支持的几个属性，添加一个 name 属性，属性值的 type 是 string， 用 default 把默认值设置成 favorite。 使用这个组件的时候可以用这个 name 属性设置一下需要的小图标。

再添加一个 color 属性，属性值的 type 是 string， default 可以是黑色。 然后再添加一个 size 属性，属性值的 type 可以是 Number，也可以是 String。 属性默认的值设置成 24。

计算

然后在组件的 computed 里面，添加两个计算属性，一个是 appIconClasses， 它返回的就是要绑定在小 i 元素上的类，添加一个 app-icon。

再添加一个 appIconStyles ，这个计算属性要返回的东西就是要绑定在小 i 元素上的样式， color 是 this.color，fontSize 是 this.size 加上 px 。

预览

定义好这个组件以后再找个地方用一下它，打开 app-home 这个组件，先导入要使用的组件，这里就是 AppIcon ，位置是 @/app/components/app-icon

在组件的 components 里面，添加一个 AppIcon。然后在组件的模板里，用一下 AppIcon 这个组件。

回到浏览器观察一下，这里会显示一个心型小图标。使用 AppIcon 组件的时候可以用 size 设置一下图标的大小，设置成 64 ，这样图标的宽度还有高度就会是 64 像素。

再用 color 设置一下图标的颜色，设置成一种紫色， 再观察一下，现在小图标就会变成紫色的了。这里还可以使用 name 这个属性设置一下要使用的小图标，比如 comment 。这样就会得到一个评论小图标。注意这个小图标的名字不能随便写，这个名字是 Material Design 图标规定好的，你可以到它的官方网站查看可以使用的小图标。