> #obsidian #obsidian/css
# Adding Material Symbols to Site Name
In addition to [[Adding a Custom Theme]], You can add Google Material Symbols to your Site Name. You can get Icons code from [Material Symbols](https://fonts.google.com/icons). Add below content to your publish.css
```css
/* ------------------- SITENAME & MATERIAL ICON ------------------- */
/* 1. Site Name Layout */
.site-body-left-column-site-name {
display: flex !important;
align-items: center;
gap: 8px;
color: var(--tx1); /* 기본 텍스트 색상 */
font-size: 1.25em;
font-weight: 600;
text-decoration: none;
transition: color 0.5s ease;
}
/* 2. Prepend Material Symbol to Site Name */
.site-body-left-column-site-name::before {
content: '\ea3e'; /* Icon Code (i.e. edit_note) */
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
-webkit-font-smoothing: antialiased;
/* Inherit text color and apply subtle transparency */
color: inherit;
/* keep it 1 or less */
opacity: 1;
transition: all 0.5s ease;
}
/* 3. Hover Interactions */
.site-body-left-column-site-name:hover {
color: var(--ax1); /* When Hover */
}
.site-body-left-column-site-name:hover::before {
opacity: 1;
color: var(--ax1);
}
```