niconico25/v-icon-sample.html

## v-icon-sample.html
<!--
  Quick start - CDN の使用
  https://vuetifyjs.com/ja/getting-started/quick-start#cdn-%E3%81%AE%E4%BD%BF%E7%94%A8
  -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- Vuetify が使うフォントの CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

    <!-- Vuetify が使う Web アイコンフォントの CSS -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

    <!-- Vuetify が使う CSS -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-content>
          <!--
            grid system - v-container, v-row
              https://vuetifyjs.com/ja/components/grids
            -->
          <v-container style="height: 100%">
            <v-row align="center" justify="space-around" style="height: 100%">
              <template v-for="icon in icons">
                <v-icon :color="icon.color" size="100px" :key="icon.name">
                  {{ icon.name }}
                </v-icon>
              </template>
            </v-row>
          </v-content>
        </v-container>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        // Vuetify の設定
        // デフォルトで { icons: { iconfont: 'mdi' }} が指定されているので
        // Material Design Icons の場合は、本来は不要らしいです。
        vuetify: new Vuetify({
          icons: {
            iconfont: 'mdi'
          }
        }),
        data () {
          return {
            // colors
            //   https://vuetifyjs.com/ja/styles/colors/
            // icons
            //   https://materialdesignicons.com/
            icons: [
              { color: 'blue lighten-4', name: 'mdi-twitter' },
              { color: 'blue darken-4',  name: 'mdi-facebook-box' },
              { color: 'grey darken-3',  name: 'mdi-github-circle' }
            ]
          }
        }
      })
    </script>
    <style type="text/css">
      #app {
        background-color: snow;
      }
    </style>
  </body>
</html>
	<!--
	Quick start - CDN の使用
	https://vuetifyjs.com/ja/getting-started/quick-start#cdn-%E3%81%AE%E4%BD%BF%E7%94%A8
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<!-- Vuetify が使うフォントの CSS -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

	<!-- Vuetify が使う Web アイコンフォントの CSS -->
	<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

	<!-- Vuetify が使う CSS -->
	<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
	</head>
	<body>
	<div id="app">
	<v-app>
	<v-content>
	<!--
	grid system - v-container, v-row
	https://vuetifyjs.com/ja/components/grids
	-->
	<v-container style="height: 100%">
	<v-row align="center" justify="space-around" style="height: 100%">
	<template v-for="icon in icons">
	<v-icon :color="icon.color" size="100px" :key="icon.name">
	{{ icon.name }}
	</v-icon>
	</template>
	</v-row>
	</v-content>
	</v-container>
	</v-app>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
	<script>
	new Vue({
	el: '#app',
	// Vuetify の設定
	// デフォルトで { icons: { iconfont: 'mdi' }} が指定されているので
	// Material Design Icons の場合は、本来は不要らしいです。
	vuetify: new Vuetify({
	icons: {
	iconfont: 'mdi'
	}
	}),
	data () {
	return {
	// colors
	// https://vuetifyjs.com/ja/styles/colors/
	// icons
	// https://materialdesignicons.com/
	icons: [
	{ color: 'blue lighten-4', name: 'mdi-twitter' },
	{ color: 'blue darken-4', name: 'mdi-facebook-box' },
	{ color: 'grey darken-3', name: 'mdi-github-circle' }
	]
	}
	}
	})
	</script>
	<style type="text/css">
	#app {
	background-color: snow;
	}
	</style>
	</body>
	</html>