Extension

PhlexIcons::Material

Source code

Icon (Variant: :outlined) ↓

With Phlex::Kit

Material::Extension(variant: :outlined)

Without Phlex::Kit (e.g. ERB) ↓

render PhlexIcons::Material::Extension.new(variant: :outlined)

Plain Phlex ↓

def view_template
	svg(
		**attrs,
		fill: 'currentColor',
		xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 24 24'
	) do |s|
		s.path(
			d:
				'M10.5 4.5c.28 0 .5.22.5.5v2h6v6h2c.28 0 .5.22.5.5s-.22.5-.5.5h-2v6h-2.12c-.68-1.75-2.39-3-4.38-3s-3.7 1.25-4.38 3H4v-2.12c1.75-.68 3-2.39 3-4.38 0-1.99-1.24-3.7-2.99-4.38L4 7h6V5c0-.28.22-.5.5-.5m0-2A2.5 2.5 0 0 0 8 5H4c-1.1 0-1.99.9-1.99 2v3.8h.29c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-.3c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7v.3H17c1.1 0 2-.9 2-2v-4a2.5 2.5 0 0 0 0-5V7c0-1.1-.9-2-2-2h-4a2.5 2.5 0 0 0-2.5-2.5z'
		)
	end
end

Plain SVG ↓

<svg xmlns="http://www.w3.org/2000/svg" class="" fill="currentColor" viewbox="0 0 24 24">
	<path d="M10.5 4.5c.28 0 .5.22.5.5v2h6v6h2c.28 0 .5.22.5.5s-.22.5-.5.5h-2v6h-2.12c-.68-1.75-2.39-3-4.38-3s-3.7 1.25-4.38 3H4v-2.12c1.75-.68 3-2.39 3-4.38 0-1.99-1.24-3.7-2.99-4.38L4 7h6V5c0-.28.22-.5.5-.5m0-2A2.5 2.5 0 0 0 8 5H4c-1.1 0-1.99.9-1.99 2v3.8h.29c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-.3c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7v.3H17c1.1 0 2-.9 2-2v-4a2.5 2.5 0 0 0 0-5V7c0-1.1-.9-2-2-2h-4a2.5 2.5 0 0 0-2.5-2.5z"></path>
</svg>

Icon (Variant: :filled) ↓

With Phlex::Kit

Material::Extension(variant: :filled)

Without Phlex::Kit (e.g. ERB) ↓

render PhlexIcons::Material::Extension.new(variant: :filled)

Plain Phlex ↓

def view_template
	svg(
		**attrs,
		fill: 'currentColor',
		xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 24 24'
	) do |s|
		s.path(
			d:
				'M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5a2.5 2.5 0 0 0-5 0V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 0-5z'
		)
	end
end

Plain SVG ↓

<svg xmlns="http://www.w3.org/2000/svg" class="" fill="currentColor" viewbox="0 0 24 24">
	<path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5a2.5 2.5 0 0 0-5 0V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 0-5z"></path>
</svg>

Icon (Variant: :round) ↓

With Phlex::Kit

Material::Extension(variant: :round)

Without Phlex::Kit (e.g. ERB) ↓

render PhlexIcons::Material::Extension.new(variant: :round)

Plain Phlex ↓

def view_template
	svg(
		**attrs,
		fill: 'currentColor',
		xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 24 24'
	) do |s|
		s.path(
			d:
				'M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5a2.5 2.5 0 0 0-5 0V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 0-5z'
		)
	end
end

Plain SVG ↓

<svg xmlns="http://www.w3.org/2000/svg" class="" fill="currentColor" viewbox="0 0 24 24">
	<path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5a2.5 2.5 0 0 0-5 0V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 0-5z"></path>
</svg>

Icon (Variant: :sharp) ↓

With Phlex::Kit

Material::Extension(variant: :sharp)

Without Phlex::Kit (e.g. ERB) ↓

render PhlexIcons::Material::Extension.new(variant: :sharp)

Plain Phlex ↓

def view_template
	svg(
		**attrs,
		fill: 'currentColor',
		xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 24 24'
	) do |s|
		s.path(
			d:
				'M20.36 11H19V5h-6V3.64c0-1.31-.94-2.5-2.24-2.63A2.5 2.5 0 0 0 8 3.5V5H2.01v5.8H3.4c1.31 0 2.5.88 2.75 2.16.33 1.72-.98 3.24-2.65 3.24H2V22h5.8v-1.4c0-1.31.88-2.5 2.16-2.75 1.72-.33 3.24.98 3.24 2.65V22H19v-6h1.5a2.5 2.5 0 0 0 2.49-2.76c-.13-1.3-1.33-2.24-2.63-2.24z'
		)
	end
end

Plain SVG ↓

<svg xmlns="http://www.w3.org/2000/svg" class="" fill="currentColor" viewbox="0 0 24 24">
	<path d="M20.36 11H19V5h-6V3.64c0-1.31-.94-2.5-2.24-2.63A2.5 2.5 0 0 0 8 3.5V5H2.01v5.8H3.4c1.31 0 2.5.88 2.75 2.16.33 1.72-.98 3.24-2.65 3.24H2V22h5.8v-1.4c0-1.31.88-2.5 2.16-2.75 1.72-.33 3.24.98 3.24 2.65V22H19v-6h1.5a2.5 2.5 0 0 0 2.49-2.76c-.13-1.3-1.33-2.24-2.63-2.24z"></path>
</svg>

Icon (Variant: :two_tone) ↓

With Phlex::Kit

Material::Extension(variant: :two_tone)

Without Phlex::Kit (e.g. ERB) ↓

render PhlexIcons::Material::Extension.new(variant: :two_tone)

Plain Phlex ↓

def view_template
	svg(
		**attrs,
		fill: 'currentColor',
		xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 24 24'
	) do |s|
		s.path(
			d:
				'M19 13h-2V7h-6V5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v2H4l.01 2.12C5.76 9.8 7 11.51 7 13.5c0 1.99-1.25 3.7-3 4.38V20h2.12c.68-1.75 2.39-3 4.38-3 1.99 0 3.7 1.25 4.38 3H17v-6h2c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z',
			opacity: '.3'
		)
		s.path(
			d:
				'M19 11V7c0-1.1-.9-2-2-2h-4a2.5 2.5 0 0 0-5 0H4c-1.1 0-1.99.9-1.99 2v3.8h.29c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-.3c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7v.3H17c1.1 0 2-.9 2-2v-4a2.5 2.5 0 0 0 0-5zm0 3h-2v6h-2.12a4.71 4.71 0 0 0-4.38-3 4.71 4.71 0 0 0-4.38 3H4v-2.12c1.75-.68 3-2.39 3-4.38 0-1.99-1.24-3.7-2.99-4.38L4 7h6V5c0-.28.22-.5.5-.5s.5.22.5.5v2h6v6h2c.28 0 .5.22.5.5s-.22.5-.5.5z'
		)
	end
end

Plain SVG ↓

<svg xmlns="http://www.w3.org/2000/svg" class="" fill="currentColor" viewbox="0 0 24 24">
	<path d="M19 13h-2V7h-6V5c0-.28-.22-.5-.5-.5s-.5.22-.5.5v2H4l.01 2.12C5.76 9.8 7 11.51 7 13.5c0 1.99-1.25 3.7-3 4.38V20h2.12c.68-1.75 2.39-3 4.38-3 1.99 0 3.7 1.25 4.38 3H17v-6h2c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z" opacity=".3"></path>
	<path d="M19 11V7c0-1.1-.9-2-2-2h-4a2.5 2.5 0 0 0-5 0H4c-1.1 0-1.99.9-1.99 2v3.8h.29c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-.3c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7v.3H17c1.1 0 2-.9 2-2v-4a2.5 2.5 0 0 0 0-5zm0 3h-2v6h-2.12a4.71 4.71 0 0 0-4.38-3 4.71 4.71 0 0 0-4.38 3H4v-2.12c1.75-.68 3-2.39 3-4.38 0-1.99-1.24-3.7-2.99-4.38L4 7h6V5c0-.28.22-.5.5-.5s.5.22.5.5v2h6v6h2c.28 0 .5.22.5.5s-.22.5-.5.5z"></path>
</svg>