# Google Material Icons

This package includes individual files for each icon, ready to be imported into a project.

Each icon is in its own file, so you can bundle several icons from different icon sets without bundling entire icon sets.

## Installation

If you are using NPM:

```bash
npm install @iconify/icons-ic --save-dev
```

If you are using Yarn:

```bash
yarn add --dev @iconify/icons-ic
```

## Usage with React

First you need to install [Iconify for React](https://github.com/iconify/iconify/packages/react).

If you are using NPM:

```bash
npm install --save-dev @iconify/react
```

If you are using Yarn:

```bash
yarn add --dev @iconify/react
```

### Example using icon 'baseline-notifications-active' with React

```js
import { Icon, InlineIcon } from '@iconify/react';
import baselineNotificationsActive from '@iconify/icons-ic/baseline-notifications-active';
```

```jsx
<Icon icon={baselineNotificationsActive} />
<p>This is some text with icon adjusted for baseline: <InlineIcon icon={baselineNotificationsActive} /></p>
```

### Example using icon 'outline-person-outline' with React

This example is using string syntax that is available since Iconify for React 2.0

This example will not work with Iconify for React 1.x

```jsx
import React from 'react';
import { Icon, addIcon } from '@iconify/react';
import outlinePersonOutline from '@iconify/icons-ic/outline-person-outline';

addIcon('outlinePersonOutline', outlinePersonOutline);

export function MyComponent() {
	return (
		<div>
			<Icon icon="outlinePersonOutline" />
		</div>
	);
}
```

### Example using icon 'twotone-videocam-off' with React

```jsx
import React from 'react';
import { InlineIcon } from '@iconify/react';
import twotoneVideocamOff from '@iconify/icons-ic/twotone-videocam-off';

export function MyComponent() {
	return (
		<p>
			<InlineIcon icon={twotoneVideocamOff} /> Sample text with an icon.
		</p>
	);
}
```

See https://github.com/iconify/iconify/packages/react for details.

## Usage with Vue

First you need to install [Iconify for Vue](https://github.com/iconify/iconify/packages/vue).

If you are using NPM:

```bash
npm install --save-dev @iconify/vue
```

If you are using Yarn:

```bash
yarn add --dev @iconify/vue
```

### Example using icon 'baseline-notifications-active' with Vue

This example is using object syntax with TypeScript.

```vue
<template>
	<p>
		<iconify-icon :icon="icons.baselineNotificationsActive" />
	</p>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import IconifyIcon from '@iconify/vue';
import baselineNotificationsActive from '@iconify/icons-ic/baseline-notifications-active';

export default Vue.extend({
	components: {
		IconifyIcon,
	},
	data() {
		return {
			icons: {
				baselineNotificationsActive: baselineNotificationsActive,
			},
		};
	},
});
</script>
```

### Example using icon 'outline-person-outline' with Vue

This example is using string syntax.

```vue
<template>
	<p>
		Example of 'outline-person-outline' icon:
		<iconify-icon icon="outlinePersonOutline" :inline="true" />!
	</p>
</template>

<script>
import IconifyIcon from '@iconify/vue';
import outlinePersonOutline from '@iconify/icons-ic/outline-person-outline';

IconifyIcon.addIcon('outlinePersonOutline', outlinePersonOutline);

export default {
	components: {
		IconifyIcon,
	},
};
</script>
```

### Example using icon 'twotone-videocam-off' with Vue

This example is using object syntax.

```vue
<template>
	<iconify-icon :icon="icons.twotoneVideocamOff" />
</template>

<script>
import IconifyIcon from '@iconify/vue';
import twotoneVideocamOff from '@iconify/icons-ic/twotone-videocam-off';

export default {
	components: {
		IconifyIcon,
	},
	data() {
		return {
			icons: {
				twotoneVideocamOff,
			},
		};
	},
};
</script>
```

See https://github.com/iconify/iconify/packages/vue for details.

## Usage with Svelte

First you need to install [Iconify for Svelte](https://github.com/iconify/iconify/packages/svelte).

If you are using NPM:

```bash
npm install --save-dev @iconify/svelte
```

If you are using Yarn:

```bash
yarn add --dev @iconify/svelte
```

### Example using icon 'baseline-notifications-active' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-ic
    import IconifyIcon from '@iconify/svelte';
    import baselineNotificationsActive from '@iconify/icons-ic/baseline-notifications-active';
</script>

<IconifyIcon icon={baselineNotificationsActive} />
```

### Example using icon 'outline-person-outline' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-ic
    import IconifyIcon from '@iconify/svelte';
    import outlinePersonOutline from '@iconify/icons-ic/outline-person-outline';
</script>

<IconifyIcon icon={outlinePersonOutline} />
```

### Example using icon 'twotone-videocam-off' with Svelte

```svelte
<script>
    // npm install --save-dev @iconify/svelte @iconify/icons-ic
    import IconifyIcon from '@iconify/svelte';
    import twotoneVideocamOff from '@iconify/icons-ic/twotone-videocam-off';
</script>

<IconifyIcon icon={twotoneVideocamOff} />
```

See https://github.com/iconify/iconify/packages/svelte for details.

## About Google Material Icons

Icons author: Material Design Authors

Website: https://github.com/cyberalien/google-material-design-icons-updated

License: Apache 2.0

License URL: https://github.com/cyberalien/google-material-design-icons-updated/blob/master/LICENSE