`<c-icon>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-icon :path="mdiAccount" />

    <c-icon :path="mdiBellOutline" size="36" />

    <c-icon :path="mdiCheckCircle" size="36" color="var(--c-success)" />
  </div>
</template>

<script setup lang="ts">
import { mdiAccount, mdiBellOutline, mdiCheckCircle } from '@mdi/js';
</script>

API reference

`<c-icon>`

Properties

Property	Attribute	Type	Default	Description
`color`	`color`	`string`	`'currentColor'`	Fill color.
`path`	`path`	`string`	—	Svg `path` `d` attribute value.
`size`	`size`	`number`	`24`	Icon size in pixels.

CSS parts

Style from outside with c-icon::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The `<svg>` element rendering the icon