How to Add and Customize Material Icons to HTML
Table of Contents
Material Icon is one of the many free icon providers. You can use this icon to enhance the appearance of your blog or website.
Apart from writing, we need an image or icon directly or more easily understand the meaning of the writing on your blog or website menu.
In your theme or template HTML file as follows:
<!DOCTYPE html>
<html>
<head>
<title>Cara menambahkan dan kustomisasi material icon ke dalam html</title>
</head>
<body>
<h1>Cara menambahkan dan kustomisasi material icon ke dalam html</h1>
<div class='panel-atas'>
<a href='#' class='akun'><span>Akun</span></a>
<a href='#' class='artikel'><span>Artikel</span></a>
<a href='#' class='tulis'><span>Tulis Baru</span></a>
<a href='#' class='logout'><span>Keluar</span></a>
</div>
</body>
</html>
In the HTML example above, we will add the account url, article, write new, and exit with the appropriate icon.
We will place the icon position right before each text, here's how and the tutorial:
1. Visit https://materialdesignicons.com/
2. Search and select the appropriate icon.
3. After you click on the icon that will be used. Click View SVG > Block and Copy the code to be placed into the HTML file.
4. Paste the code into the file or theme where the icon will be added, so that the url script part becomes like below.
<a href='#' class='akun'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z" />
</svg><span>Akun</span></a>
<a href='#' class='artikel'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M20,18H4V8H20M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M15,16H6V14H15V16M18,12H6V10H18V12Z" />
</svg><span>Artikel</span></a>
<a href='#' class='tulis'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2" />
</svg><span>Tulis Baru</span></a>
<a href='#' class='logout'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z" />
</svg><span>Keluar</span></a>
Customize Material Icons
So that the SVG icon can and is more freely customized:
1. Delete style="width:24px;height:24px
2. Then add class="ikon" it to the SVG tag so that the url script part looks like this:
<a href='#' class='akun'><svg class="ikon" viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z" />
</svg><span>Akun</span></a>
<a href='#' class='artikel'><svg class="ikon" viewBox="0 0 24 24">
<path d="M20,18H4V8H20M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M15,16H6V14H15V16M18,12H6V10H18V12Z" />
</svg><span>Artikel</span></a>
<a href='#' class='tulis'><svg class="ikon" viewBox="0 0 24 24">
<path d="M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2" />
</svg><span>Tulis Baru</span></a>
<a href='#' class='logout'><svg class="ikon" viewBox="0 0 24 24">
<path d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z" />
</svg><span>Keluar</span></a>
3. Add the following style <head> just above the closing code tag </head>
<!DOCTYPE html>
<html>
<head>
<title>Cara menambahkan dan kustomisasi material icon ke dalam html</title>
<style>
body {
font-size: 16px;
line-height: 1.5;
text-align: center;
}
.panel-atas a {
display: inline-block;
padding: 0 16px;
line-height: 1.25;
}
.panel-atas a + a {
border-left: 1px solid #ddd;
}
.panel-atas .ikon {
fill: blue;
width: 24px;
height: 24px;
}
.panel-atas .ikon + span {
display:block;
}
</style>
</head>
<body>
<h1>Cara menambahkan dan kustomisasi material icon ke dalam html</h1>
<div class='panel-atas'>
<a href='#' class='akun'><svg class="ikon" viewBox="0 0 24 24">
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z" />
</svg><span>Akun</span></a>
<a href='#' class='artikel'><svg class="ikon" viewBox="0 0 24 24">
<path d="M20,18H4V8H20M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M15,16H6V14H15V16M18,12H6V10H18V12Z" />
</svg><span>Artikel</span></a>
<a href='#' class='tulis'><svg class="ikon" viewBox="0 0 24 24">
<path d="M7,14.94L13.06,8.88L15.12,10.94L9.06,17H7V14.94M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M16.7,9.35L15.7,10.35L13.65,8.3L14.65,7.3C14.86,7.08 15.21,7.08 15.42,7.3L16.7,8.58C16.92,8.79 16.92,9.14 16.7,9.35M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2" />
</svg><span>Tulis Baru</span></a>
<a href='#' class='logout'><svg class="ikon" viewBox="0 0 24 24">
<path d="M14.08,15.59L16.67,13H7V11H16.67L14.08,8.41L15.5,7L20.5,12L15.5,17L14.08,15.59M19,3A2,2 0 0,1 21,5V9.67L19,7.67V5H5V19H19V16.33L21,14.33V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19Z" />
</svg><span>Keluar</span></a>
</div>
</body>
</html>
The following is the display result in the browser:
That's How to Add and customize material Icons to HTML. Hopefully useful and good luck.
Post a Comment